前端存儲

前端存儲

簡介

一種在前端保存數據的思想。第一次在頁面中的保存數據，那麼從第二次開始就可使用了。可使用的方法有：

1. cookie
2. localeStorage
3. sessionStorage
4. ie的userData
5. web sql
6. indexedDB

從技術角度看待這些方法。沒有高低之分，只有對特定任務是否合適。

cookie

簡介

1. cookie："小餅乾，小甜品"
2. 參與http通訊。由於在http中能夠看到cookie，因此易受到攻擊。
3. 面向路徑。只做用於當前路徑（頁面）。
4. 每一個cookie < 4K

運行機制

使用

總結

設置cookie的值

function setCookie(key, value, duration) {
    // duration 單位爲ms
    var d = new Date();
    document.cookie = key + "=" + value + "; " + d.getTime() + duration
}

獲取cookie的值

function getCookie(key) {
    var cookieArr = document.cookie.split(';');
    for (var i = 0; i < cookieArr.length; i++) {
        var cookie = cookieArr[i].trim();
        if (cookie.indexOf(key)===0) {
            return cookie.substring(key.length, key.cookie.length);
        }
    }
}

localStorage/sessionStorage

1. localStorage < 5M
2. localStorage的使用也是遵循同源策略的，因此不一樣的網站直接是不能共用相同的localStorage。能夠在同網站下跨頁面。
3. sessionStorage只做用於當前頁面。

優點
一、localStorage拓展了cookie的4K限制
二、localStorage會能夠將第一次請求的數據直接存儲到本地，這個至關於一個5M大小的針對於前端頁面的數據庫，相比於cookie能夠節約帶寬，可是這個倒是隻有在高版本的瀏覽器中才支持的

侷限
一、瀏覽器的大小不統一，而且在IE8以上的IE版本才支持localStorage這個屬性
二、目前全部的瀏覽器中都會把localStorage的值類型限定爲string類型，這個在對咱們平常比較常見的JSON對象類型須要一些轉換
三、localStorage在瀏覽器的隱私模式下面是不可讀取的
四、localStorage本質上是對字符串的讀取，若是存儲內容多的話會消耗內存空間，會致使頁面變卡
五、localStorage不能被爬蟲抓取到

使用

通常在第一次加載頁面時在本地保存好數據。從第二次開始使用本地保存的數據。爲了保證前端性能，通常不會保存大量數據。只保存關鍵數據，再根據它作出判斷後執行相應的程序。

window.localStorage//boolean 瀏覽器是否支持

寫入(3種形式)

window.localStorage["a"] = 1;
window.localStorage.b = 1;
window.setItem('c',3);

讀取

var a = window.localStorage.a;
var b = window.localStorage["b"];
var c = window.localStorage.getItem("c");
var d = window.localStorage.key(d);

修改

window.localStorage.a = 4;

刪除

window.localStorage.clear();// 清除據
window.localStorage.removeItem("a");// 刪除a

方法

localStorage.setItem('key', 'value');
localStorage.getItem('key');
localStorage.removeItem('key');
localStorage.clear();

三者的區別

特性	cookie	localStorage	sessionStorage	userData	web sql	indexedDB
生命週期	通常由服務器生成，可設置失效時間。若在瀏覽器生成，默認關閉瀏覽器後失效。	在手動刪除前一直存在	關閉當前頁面後被清除
可存放大小	<4k	<5m	<5m
與服務器通訊	每次都在http頭部信息中。過多會影響性能	僅在客戶端不能與通訊	僅在客戶端不能與通訊
易用性	原生的方法較難使用，本身封裝後會好用。	原生的方法就挺好用。可再交封裝	原生的方法就挺好用。可再交封裝

---

2018/04/03 by stone