js中cookie、sessionStorage、localStorage

一、cookie

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <input type="text" name="username" id="username" value="">
 9         <input type="password" name="password" id="password" value="">
10         <button type="button" name="button" id="btn">删除cookie</button>
11         <script type="text/javascript">
12             // 1、设置、获取
13             var d = new Date();
14             d.setHours(d.getHours() + 1);//1小时后过期
15             // path=/ 此时的/代表的是网站中所有的目录都可以访问这个cookie
16             document.cookie='username=zhangsan;expires='+d.toUTCString()+";path=/";//设置cookie
17             document.cookie;//获取所有的cookie
18             console.log(document.cookie)
19 
20             // 2.设置、获取、删除cookie
21             // setCookie('password','123456',0.5*3600*1000)//30分钟后失效
22             // setCookie('username','zhangsan',0.5*3600*1000)//30分钟后失效
23             var btnObj = document.getElementById('btn')
24             btnObj.onclick = function(){
25                 delCookie('username');
26                 delCookie('password');
27             }
28             function setCookie(name,value,expires){
29                 //计算有效期
30                 var d = new Date();
31                 //设置有效期
32                 d.setTime(d.getTime()+expires);
33                 //设置cookie
34                 document.cookie = name +'='+value+';expires='+d.toUTCString();
35             }
36             function getCookie(name) {
37                 //获取cookie
38                 var cookieStr = document.cookie;
39                 //根据；拆分
40                 var cookieArr = cookieStr.split(';');
41                 //获取对应的cookie值
42                 name += '=';//获取的cookie值都是后面有=
43                 var result = '';
44                 for(var i=0;i<cookieArr.length;i++) {
45                     //没一个cookie值得前面都有一个空格，将空格删除，再去查找对应的name值
46                     var tmp = cookieArr[i].trim();
47                     if(tmp.indexOf(name) == 0) {
48                         //如果查找成功，则直接返回
49                         result = tmp.slice(name.length);
50                         break;
51                     }
52                 }
53                 //返回结果
54                 return result;
55             }
56             function delCookie(name) {
57                 var d = new Date();
58                 d.setTime(d.getTime()-1000);
59                 document.cookie = name+'=;expires='+d.toUTCString();
60             }
61         </script>
62     </body>
63 </html>

二、sessionStorage

【

　html5新增的会话存储对象；

生命周期：关闭窗口或标签页之后将会删除这些数据

　存储上限限制：不同的浏览器存储的上限也不一样，但大多数浏览器把上限限制在5MB以下。
】

使用方法：

 1 string sessionStorage.getItem(string key) ：返回键名(key)对应的值(value)。若没有返回null。
 2 
 3 void sessionStorage.setItem(string key, string value) ：该方法接受一个键名(key)和值(value)作为参数，将键值对添加到存储中；如果键名存在，则更新其对应的值。
 4 
 5 void sessionStorage.removeItem(string key) ：将指定的键名(key)从 sessionStorage 对象中移除。
 6 
 7 void sessionStorage.clear() ：清除 sessionStorage 对象所有的项。
 8 
11 
12 sessionStorage.setItem('username','admin') //存储数据
13 sessionStorage.getItem('username')//获取
14 sessionStorage.clear();//清楚所有
15 sessionStorage.removeItem('username')//清楚指定
16 
17 
18 也可以存储JSON对象【JSON.stringify(obj)和JSON.parse(stry)】
19 eg:
20 var obg = {
21 　　name:'tom',
22 　　age:22
23 };
24 //存储值：将对象转换为Json字符串
25 sessionStorage.setItem('user',JSON.stringify(obj));
26 //取值时：把获取到的Json字符串转换回对象
27 var userJsonStr = sessionStorage.getItem('user');
28 userObj = JSON.parse(userJsonStr);
29 console.log(userObj.name);//tom