sessionStorage、localStorage用法總結

在工做中使用sessionStorage存儲數據時，發現sessionStorage沒法直接存儲數組和對象，如存入對象則顯示爲"[object Object]"，對此做下記錄，從新溫習sessionStorage和localStorage

html5 中的 web Storage 包括了兩種存儲方式：sessionStorage 和 localStorage

共同點

存儲大小爲5MB，都保存在客戶端，不與服務器進行交互通訊，有相同的Web API

sessionStorage、localStorage區別

localStorage 存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據；

sessionStorage 數據在當前瀏覽器窗口關閉後自動刪除。

所以sessionStorage 和 localStorage 的主要區別在於他們存儲數據的生命週期，sessionStorage 存儲的數據的生命週期是一個會話，而 localStorage存儲的數據的生命週期是永久，除非主動刪除數據，不然永遠不會過時

Web Storage API

localStorage 和 sessionStorage 有着統一的API接口，下面以sessionStorage爲例介紹一下 API 接口使用方法

添加鍵值對

setItem(key,value)：爲指定key值設置一個對應的value值

除了使用setItem方法，還可使用sessionStorage.key = value或者sessionStorage['key'] = value這兩種形式。

// 把name值存儲到name的鍵上
sessionStorage.setItem('name', 'jacky'); // 法1 
// sessionStorage.name = 'jacky'; // 法2 
// sessionStorage['name'] = 'jacky'; // 法3

添加數組和對象

須要注意的是key和value值必須是字符串形式的，若是不是字符串，會調用它們相應的toString()方法來轉換成字符串再存儲。

因此要存儲數組或對象時，應先轉換成字符串格式（如JSON格式）再進行存儲，使用JSON.stringify(obj)方法

var obj = {
    name: 'jacky', 
    age: 22
};
sessionStorage['person'] = JSON.stringify(obj);
//sessionStorage['person'] = obj; 不能這樣存儲，這樣存進去結果是"[object Object]"

存進去以後則爲字符串格式

"{"name":"jacky","age":22}"

須要拿出來使用的時候則使用JSON.parse()方法將JSON字符串轉換爲對象

var person = JSON.parse(sessionStorage['person'])

同理，數組也是這個用這個方法進行存儲。

getItem（key）：根據指定的key值獲取對應的value值

和setItem同樣，getItem也有兩種等效形式,value = sessionStorage.key和value = sessionStorage['key']。獲取到的 value 值是字符串類型，若是須要其餘類型，須要本身作類型轉換。

// 獲取存儲到 name 的鍵上的值
var name = sessionStorage.getItem('name');
// var name = sessionStorage.name;
// var name = sessionStorage['name'];

removeItem（key）：刪除指定的key值對應的value值

注意localStorage 沒有數據過時的概念，全部數據若是失效了，須要開發者手動刪除。

var name = sessionStorage.getItem('name'); // "jacky"
    sessionStorage.removeItem('name');
    name = sessionStorage.getItem('name'); // null

clear()：刪除全部存儲的內容

它和removeItem不一樣的地方是removeItem刪除的是某一項，而clear是刪除全部。

// 清除 localStorage
    sessionStorage.clear();
    var len = sessionStorage.length; // 0
    //length屬性用於獲取 sessionStorage 中鍵值對的數量。

key(index)：在指定的數字位置獲取該位置的名字

須要注意的是賦值早的鍵值對應的索引值大，賦值完的鍵值對應的索引小,key方法可用於遍歷 sessionStorage 存儲的鍵值。

sessionStorage.setItem('name','jacky');
    var key = sessionStorage.key(0); // 'name'
    sessionStorage.setItem('age', 10);
    key = sessionStorage.key(0); // 'age'
    key = sessionStorage.key(1); // 'name'

二者應用場景

sessionStorage應用場景

進行頁面傳值

localStorage應用場景

1. 適合長期保存在本地的數據
2. 能夠用於存儲該瀏覽器對該頁面的訪問次數