localStorage和sessionStorage區別

blacker2018發表於2018-07-02
Session

概述

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";
複製程式碼

相關文章