localStorage和sessionStorage區別

概述

localStorage和sessionStorage同樣都是用來存儲客戶端臨時信息的對象。

他們均只能存儲字符串類型的對象（雖然規範中能夠存儲其餘原生類型的對象，可是目前爲止沒有瀏覽器對其進行實現）。

localStorage生命週期是永久，這意味着除非用戶顯示在瀏覽器提供的UI上清除localStorage信息，不然這些信息將永遠存在。

sessionStorage生命週期爲當前窗口或標籤頁，一旦窗口或標籤頁被永久關閉了，那麼全部經過sessionStorage存儲的數據也就被清空了。

sessionStorage

sessionStorage 是HTML5新增的一個會話存儲對象,用於臨時保存同一窗口(或標籤頁)的數據,在關閉窗口或標籤頁以後將會刪除這些數據。

使用

1. setItem 存儲 value

用途：將 value 存儲到 key 字段

用法：.setItem( key, value)

代碼示例：

sessionStorage.setItem("key", "value"); 	
localStorage.setItem("site", "js8.in");
複製代碼

2. getItem 獲取 value

用途：獲取指定 key 本地存儲的值

用法： .getItem(key)

代碼示例：

var value = sessionStorage.getItem("key"); 	var site = localStorage.getItem("site");

//滾動時保存滾動位置
$(window).scroll(function(){
if($(document).scrollTop()!=0){
    sessionStorage.setItem("offsetTop", $(window).scrollTop());//保存滾動位置
    } 
});
//onload時，取出並滾動到上次保存位置
 
window.onload = function() {
    var _offset = sessionStorage.getItem("offsetTop");
    $(document).scrollTop(offsetTop);
};
複製代碼

localStorage

不一樣瀏覽器沒法共享localStorage或sessionStorage中的信息。相同瀏覽器的不一樣頁面間能夠共享相同的 localStorage（頁面屬於相同域名和端口），可是不一樣頁面或標籤頁間沒法共享sessionStorage的信息。這裏須要注意的是，頁面及標 籤頁僅指頂級窗口，若是一個標籤頁包含多個iframe標籤且他們屬於同源頁面，那麼他們之間是能夠共享sessionStorage的。

同源的判斷規則：

http://www.test.com

https://www.test.com （不一樣源，由於協議不一樣）

http://my.test.com（不一樣源，由於主機名不一樣）

http://www.test.com:8080（不一樣源，由於端口不一樣）

localStorage和sessionStorage使用時使用相同的API：

localStorage.setItem("key","value");//以「key」爲名稱存儲一個值「value」

localStorage.getItem("key");//獲取名稱爲「key」的值
複製代碼

枚舉localStorage的方法：

for(var i=0;i<localStorage.length;i++){

     var name = localStorage.key(i)​;

     var value = localStorage.getItem(name);​

}
複製代碼

刪除localStorage中存儲信息的方法：

localStorage.removeItem("key");//刪除名稱爲「key」的信息。

localStorage.clear();​//清空localStorage中全部信息
複製代碼

經過getItem或直接使用localStorage["key"]獲取到的信息均爲實際存儲的副本。

例如：

localStorage.key = {value1:"value1"}​;

localStorage.key.value1='a'​;
複製代碼

這裏是沒法對實際存儲的值產生做用的，下面的寫法也不能夠：

localStorage.getItem("key").value1="a";
複製代碼