lovecoding
/
VIP32


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        cookie 与 webStorage的区别
        1.cookie会与服务器交互(速度变慢);
        2.cookie储存大小约4kb;
        3.webStorage是把数据储存到客户端,不会和服务器交互,可随机获取(速度快);
        4.webStorage储存大小是5MB,可储存的数据更大;
        注意：webStorage就是为了弥补cookie的缺陷;
        5.对于临时存储的数据使用sessionStorage更方便;
        6.webStorage不参与服务器通信,储存在本地更安全;
        7.webStorage中的键值对必须是字符串;使用时需要转JS对象;
     -->
     <!-- 
        存储：
            cookie:服务端
            webStorage:
                本地存储:localStorage:除非手动删除 否则不会消失
                会话存储:sessionStorage:关闭页面就会消失
      -->
      <button id="btn1">删除姓名</button>
      <button id="btn2">全部删除</button>
      <script>
        /**
         * 读取数据
         * 1.localStorage/sessionStorage.getItem("属性名")
         * 2.localStorage/sessionStorage.属性名
         * 3.localStorage/sessionStorage["属性名"]
         * 
         * 设置数据
         * 1.localStorage/sessionStorage.setItem("属性名","属性值")
         * 2.localStorage/sessionStorage.属性名 = "属性值"
         * 3.localStorage/sessionStorage["属性名"] = "属性值"
         * 
         * 删除一条数据
         * localStorage/sessionStorage.removeItem("属性名")
         * 
         * 全部删除
         * localStorage/sessionStorage.clear()
         * 
         * 得到某个下标索引的key值
         * localStorage/sessionStorage.key(下标)
         */
       var btn1 = document.getElementById("btn1");
       var btn2 = document.getElementById("btn2");
       localStorage.setItem("name","Lucy");
       localStorage.age = "18";
       localStorage["sex"] = "0"
       console.log(localStorage.getItem("aaa"));
       console.log(localStorage.bbb);
       console.log(localStorage["aaa"]);
       var name1 = localStorage.getItem("name");
       var age1 = localStorage.age;
       var sex1 = localStorage["sex"];
    //    if(sex1 == "1") {
    //     alert(name1 + '是个' + age1 + '岁的女孩');
    //    } else if(sex1 == '0') {
    //     alert(name1 + '是个' + age1 + '岁的男孩');
    //    }
    //    localStorage.removeItem
       btn1.onclick = function() {
        localStorage.removeItem("name");
       }
       btn2.onclick = function() {
        localStorage.clear();
       }
       console.log(sessionStorage.getItem("cc"));
       localStorage.arr1 = {
        a:"12",
        b:"34",
        length: 2
       }
       var news = localStorage.key(1);
       console.log(localStorage.getItem(news));
    localStorage.obj1 = {a:"A"}
      </script>
</body>
</html>