[Html5]sessionStorage和localStorage的區別

摘要

有時需要在瀏覽器中保存一些數據，特別在app中嵌入的h5頁面中，需要在webview中保存一些數據，作為客戶端的數據持久化。

h5中web storage有兩種存儲方式:sessionStorage和localStorage。

sessionStorage：用於存儲一次會話的數據，這些數據只有在同一個會話中的頁面才能訪問到，當會話結束后，數據也隨之銷毀，可以這樣形容sessionStorage，是會話級別的數據存儲。

localStorage：用於持久本地數據，除非主動刪除，否則數據永遠存在。

web Storage和cookie的區別

首先，它們都是存儲在客戶端的。但cookie的大小是受限制的，並且每次請求服務器，都會帶着cookie中的數據。而且cookie，需要指定作用域，不可跨域訪問。

web Storage可以通過setItem，getItem，removeItem，clear等方法，操作更方便。cookie則不同，如果你想用js操作cookie，需要自己封裝設置和獲取cookie的方法。

兼容性

除了萬惡的IE7- ,現在的主流瀏覽器都支持web Storage。可以通過下面的代碼判斷是否支持web Storage。

    if (window.localStorage) {
        console.log("支持");
    } else {
        console.log("No支持");
    };

localStorage和sessionStorage

通過setItem("key","value")設置值。

注意，這里key和value都是string類型的。如果想要存儲json，需要將json轉換為json字符串。

    window.localStorage.setItem("user", "wolfy");
    window.localStorage.setItem("userJson", JSON.stringify({ "name": "wolfy", "age": 25 }));

 

getItem("key"):獲取key對應value

  console.log("name",window.localStorage.getItem("user"));

刪除

  window.localStorage.removeItem("user");

清楚所有的值

window.localStorage.clear();

總結

總結，這里只列舉了localStorage的用法，seesionStorage的類似。只不過他們的生命周期不同，sessionStorage是會話級別的存儲，你可以這樣理解，當瀏覽器關閉的時候，sessionStorage已經沒有了，而localStorage仍然存在。