HTML5 localStorage使用方法及注意點

html5新增了在客戶端存儲數據的新方法：
1.localStorage - 沒有時間限制的數據存儲；
2.sessionStorage - 針對一個session的數據存儲，當用戶關閉瀏覽器窗口後，數據會被刪除。

瀏覽器支持程度

注意到，IE8以及以上版本是支持localStorage和sessionStorage的，可是須要注意的是，IE8-IE10中是須要服務器或者localhost才能使用。

使用方法

localStorage和sessionStorage的使用方法是一致的，區別在於：
localStorage方法存儲的數據沒有時間限制。次日、第二週或下一年以後，數據依然可用。而sessionStorage 方法針對一個 session 進行數據存儲。當用戶關閉瀏覽器窗口後，數據會被刪除。

建立localStorage

localStorage.setItem('user','輪迴韓');

或

localStorage.user='輪迴韓';

訪問localStorage

localStorage.getItem('user','輪迴韓');      //與localStorage.setItem對應

或

localStorage.user;       //與設置時localStorage.user='輪迴韓'對應

存儲數組和對象

localStorage都是以字符串形式來存儲數據的，即便你存儲的是數組和對象，localStorage也會將數組和對象以字符串的形式存儲。

存儲對象

var obj={
            name:'輪迴韓',
            age:'100',
            sex:'女'
        };
console.log(obj);                  //輸出 Object {name: "輪迴韓", age: "100", sex: "女"}
console.log(typeof obj);           //輸出 object 

window.localStorage.setItem('people',obj);
                      
console.log(window.localStorage.getItem('people'));           //輸出 [object Object]                                                     
console.log(typeof window.localStorage.getItem('people'));    //輸出 string

存儲數組

var arr=[2,3,5];
console.log(arr);               //輸出 [2, 3, 5]                       
console.log(typeof arr);        //輸出 object

window.localStorage.setItem('num',arr);

console.log(window.localStorage.getItem('num'));              //輸出 2,3,5
console.log(typeof window.localStorage.getItem('num'));       //輸出 string

解決辦法

其實大多時候咱們想要存儲的就是數組和對象，這時候該怎麼辦呢？
解決辦法就是存儲的時候用JSON.stringify轉換後再存儲，獲取的時候用JSON.parse()轉換後再獲取。

var obj={
            name:'輪迴韓',
            age:'100',
            sex:'女'
        };
console.log(obj);                        //Object {name: "輪迴韓", age: "100", sex: "女"}
console.log(typeof obj);                 //object

window.localStorage.setItem('people',JSON.stringify(obj));

console.log(JSON.parse(window.localStorage.getItem('people')));        //Object {name: "輪迴韓", age: "100", sex: "女"}
console.log(typeof JSON.parse(window.localStorage.getItem('people'))); //object