SessionStorage和LocalStorage允许在Web浏览器中保存键/值对。该值必须是一个字符串,并且保存js对象并不简单。
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
方法来拦截调用,但这是一项繁琐的工作,因为我必须定义所有属性,而我的目标是不知道未来的属性。
答案 0 :(得分:100)
您是否可以“对字符串化”对象...然后使用sessionStorage.setItem()
存储对象的字符串表示形式...然后在需要时sessionStorage.getItem()
然后使用$.parseJSON()
把它拿回来?
答案 1 :(得分:77)
解决方案是在sessionStorage上调用setItem之前对对象进行字符串化。
var user = {'name':'John'};
sessionStorage.setItem('user', JSON.stringify(user));
var obj = JSON.parse(sessionStorage.user);
答案 2 :(得分:17)
您可以使用Web Storage API提供的访问器,也可以编写包装器/适配器。从你声明的defineGetter / defineSetter问题来看,就像写一个包装器/适配器对你来说太多了。
老实说,我不知道该告诉你什么。也许你可以重新评估你对什么是“荒谬的限制”的看法。 Web Storage API就是它应该是的一个键/值存储。
答案 3 :(得分:7)
这是一个动态解决方案,适用于所有值类型,包括对象:
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');
答案 4 :(得分:5)
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)
Storage.prototype.setObj = function(key, obj) {
return this.setItem(key, JSON.stringify(obj))
};
Storage.prototype.getObj = function(key) {
return JSON.parse(this.getItem(key))
};
答案 5 :(得分:4)
会话存储不能支持任意对象,因为它可能包含在页面重新加载后无法重建的函数文字(读取闭包)。
答案 6 :(得分:3)
var user = {'name':'John'};
sessionStorage['user'] = JSON.stringify(user);
console.log(sessionStorage['user']);
答案 7 :(得分:2)
您还可以使用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)
})
答案 8 :(得分:0)
您可以创建2种包装方法来从会话存储中保存和检索对象。
function saveSession(obj) {
sessionStorage.setItem("myObj", JSON.stringify(obj));
return true;
}
function getSession() {
var obj = {};
if (typeof sessionStorage.myObj !== "undefined") {
obj = JSON.parse(sessionStorage.myObj);
}
return obj;
}
像这样使用它:-获取对象,修改一些数据,然后保存。
var obj = getSession();
obj.newProperty = "Prod"
saveSession(obj);