|
@@ -0,0 +1,93 @@
|
|
|
|
|
+<!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对象;
|
|
|
|
|
+
|
|
|
|
|
+ -->
|
|
|
|
|
+ <script>
|
|
|
|
|
+ // document.cookie = "name='LiLi'";
|
|
|
|
|
+ // 修改
|
|
|
|
|
+ var date = new Date();
|
|
|
|
|
+ date.setTime(date.getTime() + (5*24*60*60*1000))
|
|
|
|
|
+ document.cookie = "name='111';expires=" + date;
|
|
|
|
|
+ // console.log(date.toUTCString())
|
|
|
|
|
+ // 删除
|
|
|
|
|
+ var date1 = new Date();
|
|
|
|
|
+ // toUTCString世界時
|
|
|
|
|
+ document.cookie = 'password="123";expires=' + date1.toUTCString();
|
|
|
|
|
+ // document.cookie = 'password="123"';
|
|
|
|
|
+ // 设置
|
|
|
|
|
+ // function setCookie(cname,cValue,cTime) {
|
|
|
|
|
+ // var d = new Date();
|
|
|
|
|
+ // d.setTime(d.getTime()+(cTime * 24 *60 *60*1000));
|
|
|
|
|
+ // console.log(d,'d')
|
|
|
|
|
+ // var expires = "expires=" + d.toGMTString();
|
|
|
|
|
+
|
|
|
|
|
+ // document.cookie=cname +"="+cValue+";"+expires;
|
|
|
|
|
+ // }
|
|
|
|
|
+ // setCookie("address",'1212',3)
|
|
|
|
|
+ // 获取
|
|
|
|
|
+ console.log(document.cookie,'cookie')
|
|
|
|
|
+ // web Storage
|
|
|
|
|
+ // 存放数据：
|
|
|
|
|
+ // 1.localStorage.setItem("属性名");
|
|
|
|
|
+ // 2.localStorage.属性名;
|
|
|
|
|
+ // 3.localStorage["属性名"];
|
|
|
|
|
+
|
|
|
|
|
+ // 读取数据：
|
|
|
|
|
+ // 1.localStorage.getItem("属性名");
|
|
|
|
|
+ // 2.localStorage.属性名;
|
|
|
|
|
+ // 3.localStorage["属性名"];
|
|
|
|
|
+
|
|
|
|
|
+ // 3.删除一条数据
|
|
|
|
|
+ // 语法：localStorage.removeItem("属性名");
|
|
|
|
|
+
|
|
|
|
|
+ // 4.清除所有的数据
|
|
|
|
|
+ // 语法：localStorage.clear();
|
|
|
|
|
+
|
|
|
|
|
+ // 5.得到某个索引的key;
|
|
|
|
|
+ // 语法：localStorage.key(下标);//注意：下标是整数;
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ // 本地存储
|
|
|
|
|
+ // localStorage
|
|
|
|
|
+ localStorage.setItem("name",'lucy');
|
|
|
|
|
+ localStorage.age = '10';
|
|
|
|
|
+ localStorage['sex'] = '1';
|
|
|
|
|
+
|
|
|
|
|
+ console.log(localStorage.getItem("name"))
|
|
|
|
|
+ console.log(localStorage.age)
|
|
|
|
|
+ localStorage.removeItem("sex");
|
|
|
|
|
+ console.log(localStorage['sex'])
|
|
|
|
|
+
|
|
|
|
|
+ localStorage.arr1 = {a: "A", city: "布加迪威龙", length: 2}
|
|
|
|
|
+ console.log(localStorage.key(1.5))
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ // 会话存储
|
|
|
|
|
+ // sessionStorage
|
|
|
|
|
+ sessionStorage.setItem("name",'lucy');
|
|
|
|
|
+ sessionStorage.age = '10';
|
|
|
|
|
+ sessionStorage['sex'] = '1';
|
|
|
|
|
+
|
|
|
|
|
+ sessionStorage.clear();
|
|
|
|
|
+ </script>
|
|
|
|
|
+</body>
|
|
|
|
|
+</html>
|
e