localStorage和sessionStorage區別

blacker2018 發表於 2018-07-02
localStorage

概述

localStoragesessionStorage一樣都是用來儲存客戶端臨時資訊的物件。

他們均只能儲存字串型別的物件(雖然規範中可以儲存其他原生型別的物件,但是目前為止沒有瀏覽器對其進行實現)。

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

不同瀏覽器無法共享localStoragesessionStorage中的資訊。相同瀏覽器的不同頁面間可以共享相同的 localStorage(頁面屬於相同域名和埠),但是不同頁面或標籤頁間無法共享sessionStorage的資訊。這裡需要注意的是,頁面及標 籤頁僅指頂級視窗,如果一個標籤頁包含多個iframe標籤且他們屬於同源頁面,那麼他們之間是可以共享sessionStorage的。

同源的判斷規則:

http://www.test.com

https://www.test.com (不同源,因為協議不同)

http://my.test.com(不同源,因為主機名不同)

http://www.test.com:8080(不同源,因為埠不同)

localStoragesessionStorage使用時使用相同的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";
複製程式碼