sessionStorage、localStorage用法總結詳情 - sessionstorage,localstorage JackySummer 博客

在工作中使用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'