HTML5 本地存儲

HTML5 本地存儲簡介

Cookie

* 大小： 限制在4kb
* 帶寬： cookies是隨Http事務一塊兒發送的，所以會浪費帶寬
* 複雜性： 要正確操做cookies是很困難的

Web Storage

HTML5中從新提供了一種在客戶端本地保存數據的功能，他就是Web Storage, 具體來講，Web Storage 又分爲兩種

• sessionStorage

  將數據保存在session對象中。所謂session，是指用戶在瀏覽某個網站時，從進入網站到瀏覽器關閉過通過的這段時間。session對象能夠用來保存在這段時間內要求保存的任何數據。數據爲臨時保存。

• local Storage

  將數據保存在客戶端本地的硬件設備，數據永久保存

LocalStorage的優點與侷限

優點

1. localStorage拓展了cookie的4K限制， 能夠存儲5M數據（不一樣瀏覽器可能不一樣）
2. 不佔用帶寬
3. 像cookies同樣， 一樣受同源策略限制

侷限

1. 瀏覽器兼容性問題，在IE8以上的IE版本才支持localStorage這個屬性，且不一樣瀏覽器支持不一樣
2. 儲存類型限定爲string類型，這個在對咱們平常比較常見的JSON對象類型須要一些轉換
3. 在瀏覽器的隱私模式下面是不可讀取的
4. localStorage不能被爬蟲抓取到

API

if(!window.localStorage){
        return false;
    }else{
           var storage = window.localStorage;
            //設置
            storage.setItem('data', JSON.stringify({
                    name: 'paopaolee',
                    age: 12
            }))

            //遍歷全部值
        for(var i=0; i<window.localStorage.length;i++){
        console.log(storage.getItem(storage.key(i)));
        }
    
    }