html5 webStorage:localStorage sessionStorage

localStorage sessionStorage的使用：

与cookie相比，webStorage有很多优势（如本文结尾），所以在选择的时候，优先选择webStorage！

sessionStorage使用方法完全同localStorage一致，不同之处：

1 localStorage:没有时间限制的数据存储，一直存在于浏览器，直到用户清除数据；

2 sessionStorage只针对一个 session 的数据存储，关闭当前网页/窗口就会消失；

 1 if(typeof(Storage)!=="undefined")
 2 {
 3     // 是的! 支持 localStorage  sessionStorage 对象!
 4     // console.log('支持');
 5 
 6     //增
 7         //数字
 8     localStorage.setItem("age",28);
 9         //字符串
10     localStorage.setItem('name','guo');
11     localStorage.setItem('lastname','jayson');
12         //数组
13     localStorage.setItem('skills',['html','js','css']);
14     //或者使用如下方式增/改/查
15     // var name='guo';
16     // localStorage.name=name;
17     // var lsName=localStorage.name;
18     //删
19     localStorage.removeItem('name');
20     // localStorage.clear();
21     //改
22     localStorage.setItem('age',29);
23     //查
24     var lsAge=localStorage.getItem("age");
25     var lsLastname=localStorage.getItem("lastname");
26     //遍历所有的item
27     for(var i=0;i<localStorage.length;i++){
28         var lsName=localStorage.key(i);
29         var lsValue=localStorage.getItem(lsName);
30         // console.log(lsValue);
31     }
32 
33     //存储对象（集合）的处理
34     var o = {
35         // x:1,
36         // y:2
37         name:'jayson',
38         age:27
39     };
40     var oStr = JSON.stringify(o);    //由于存储的内容都是字符串，序列化对象
41     localStorage.setItem("o",oStr);
42     localStorage.getItem("o");    //{"x":1}     typeof类型：string
43     var one=JSON.parse(localStorage.getItem("o")).name;    //反序列化
44     var two=JSON.parse(localStorage.getItem("o")).age;
45     // console.log(one);
46     // console.log(two);
47 
48     // 识别使用哪种存储机制
49     var memory = window.localStorage || (window.UserDataStorage && new UserDataStorage()) || new CookieStorage();
50     // 然后在对应机制中获取数据
51     var memName=memory.getItem("name");
52     // console.log(memName);
53 
54 } else {
55     // 抱歉! 不支持 web 存储。
56     console.log('不支持');
57 }

与Cookie相比，Web Storage存在不少的优势，概括为以下几点：

  1. 存储空间更大：IE8下每个独立的存储空间为10M，其他浏览器实现略有不同，但都比Cookie要大很多。

  2. 存储内容不会发送到服务器：当设置了Cookie后，Cookie的内容会随着请求一并发送的服务器，这对于本地存储的数据是一种带宽浪费。而Web Storage中的数据则仅仅是存在本地，不会与服务器发生任何交互。

  3. 更多丰富易用的接口：Web Storage提供了一套更为丰富的接口，使得数据操作更为简便。

  4. 独立的存储空间：每个域（包括子域）有独立的存储空间，各个存储空间是完全独立的，因此不会造成数据混乱。（因此每个域下都有10M的webStorage存储空间）

 

 
posted @ 2016-11-01 12:54  jaysonguo  阅读(691)  评论(2)  编辑  收藏  举报