|
|
@@ -0,0 +1,84 @@
|
|
|
+<!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>
|
e