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存儲空間）