102

SessionStorage和LocalStorage允許在Web瀏覽器中保存鍵/值對。該值必須是一個字符串，並且保存js對象不是微不足道的。在sessionStorage中保存Javascript對象

var user = {'name':'John'}; 
sessionStorage.setItem('user', user); 
var obj = sessionStorage.user; // obj='[object Object]' Not an object

現在，您可以通過將對象序列化爲JSON，然後反序列化它們以恢復對象來避免此限制。但是Storage API總是通過setItem和getItem方法。

sessionStorage.setItem('user', JSON.stringify(user)); 
var obj = JSON.parse(sessionStorage.getItem('user')); // An object :D

我可以避免這種限制嗎？

我只是要執行這樣的事情：

sessionStorage.user.name; // 'John' 
sessionStorage.user.name = 'Mary'; 
sessionStorage.user.name // 'Mary'

我曾嘗試defineGetter和defineSetter方法攔截電話，但它是一個單調乏味的工作，因爲我必須定義所有屬性和我的目標是不瞭解未來的屬性。

來源

2011-05-31 Ferran Basora

我想到的是我自己。我想很多人都有。但我認爲getter和setter方法不是一個太大的負擔。 BTW;你可以使用JavaScript進行序列化和解析，並且MS最終支持與其他人一樣的標準對象。像JSON和jQuery這樣的軟件包需求日益迅速到來。 – 2013-03-18 07:45:29

我想我沒有看到這個限制。如果你只有微不足道的對象，那麼使用JSON.stringify和JSON.parse看起來可能過於矯枉過正，但如果你有大小適中的數據對象，那麼這兩種方法正在爲你做很多工作。 – Robusto 2013-08-05 15:26:01

「我能避免這種限制嗎？」似乎是一個問題 – sonicblis 2014-06-19 21:17:46

您可以使用Web Storage API提供的訪問器，也可以編寫包裝器/適配器。從你聲明的問題與defineGetter/defineSetter聽起來像寫一個包裝/適配器對你來說太多的工作。

我真的不知道該告訴你什麼。也許你可以重新評估一下什麼是「荒謬的限制」。 Web Storage API就是它應該成爲的關鍵/價值商店。

來源

2011-05-31 21:28:41

對不起，如果我用一個不合適的詞與'荒謬'。用'可能很有趣'代替它。我認爲webStorage是新網站最令人興奮的改進之一。但只保存值鍵盤中的字符串我認爲是一個限制。這似乎是一個餅乾'續集。我知道存儲是一個不僅適用於Javascript語言的規範，但序列化對象可能是一個有趣的改進。你怎麼看？ – 2011-06-02 09:18:31

如果JSON不夠，可以隨時編寫自己的對象序列化方法。 – 2011-06-02 14:07:34

甚至違背SO規則的最愚蠢的答案。 Downvoted。 – sidney 2017-12-06 10:48:16

難道你不能'串化'你的對象...然後使用sessionStorage.setItem()來存儲你的對象的字符串表示...然後當你需要它sessionStorage.getItem()，然後使用$.parseJSON()讓它退出？

工作實例http://jsfiddle.net/pKXMa/

來源

2012-04-25 22:40:23 afreeland

這適用於我。在調用$ .parseJSON（）後，我得到一個工作的Json對象（） – 2014-11-24 15:46:49

一些像Web Api認證的系統以Object {propertyOneWithoutQuotes：「」，... propertyNWithoutQuotes：「」}的形式返回對象，需要經過「stringify 」。如果有多個來源，使用stringify來標準化數據可能會更好。 – Jelgab 2015-01-28 16:55:17

這是非常好的答案。使用JSON.stringify（）來序列化對象並存儲在sessionStorage中是很好的。然後，它使用$ .parseJSON（）來反序列化字符串以獲取對象。 – 2016-12-03 00:21:00

使用案例：

sesssionStorage.setObj(1,{date:Date.now(),action:'save firstObject'}); 
sesssionStorage.setObj(2,{date:Date.now(),action:'save 2nd object'}); 
//Query first object 
    sesssionStorage.getObj(1) 
    //Retrieve date created of 2nd object 
    new Date(sesssionStorage.getObj(1).date)

API

Storage.prototype.setObj = function(key, obj) { 

     return this.setItem(key, JSON.stringify(obj)) 
    }; 

    Storage.prototype.getObj = function(key) { 
     return JSON.parse(this.getItem(key)) 
    };

來源

2014-11-26 06:55:52

我認爲在JavaScript中的最佳做法之一是不原型對象，你不擁有。使用Storage.prototype.setObj看起來不是一個好主意。 – britztopher 2015-01-13 15:44:42

相信我。這是一個好主意，除了Object對象本身 – 2015-01-13 16:15:31

只是增加了強制性..確保你不添加這個原型代碼 - 並獨佔依賴 - 沒有首先檢查瀏覽器是否支持它存儲：'if（typeof（Storage）！==「undefined」）{/ *瀏覽器支持* /}' – JoeBrockhaus 2015-04-09 14:26:34

的解決方案是呼籲的sessionStorage setItem之前字符串化的對象。

var user = {'name':'John'}; 
sessionStorage.setItem('user', JSON.stringify(user)); 
var obj = JSON.parse(sessionStorage.user);

來源

2015-10-02 11:05:03 Ron

var user = {'name':'John'}; 
    sessionStorage['user'] = JSON.stringify(user); 
    console.log(sessionStorage['user']);

來源

2016-01-19 07:46:23

這是一個動態的解決方案，與所有的值類型，包括對象的工作原理：

class Session extends Map { 
    set(id, value) { 
    if (typeof value === 'object') value = JSON.stringify(value); 
    sessionStorage.setItem(id, value); 
    } 

    get(id) { 
    const value = sessionStorage.getItem(id); 
    try { 
     return JSON.parse(value); 
    } catch (e) { 
     return value; 
    } 
    } 
}

然後：

const session = new Session(); 

session.set('name', {first: 'Ahmed', last : 'Toumi'}); 
session.get('name');

來源

2017-03-15 02:38:36

不錯，但不適用於函數。 – RSG 2018-02-01 14:53:34

你也可以用它來執行它的store library你具有交叉瀏覽能力。

例如：

// Store current user 
store.set('user', { name:'Marcus' }) 

// Get current user 
store.get('user') 

// Remove current user 
store.remove('user') 

// Clear all keys 
store.clearAll() 

// Loop over all stored values 
store.each(function(value, key) { 
    console.log(key, '==', value) 
})

來源

2017-10-11 11:58:03 3Dos

在sessionStorage中保存Javascript對象

回答

使用案例：

API

相關問題