将数据保存到本地存储
Posted
技术标签:
【中文标题】将数据保存到本地存储【英文标题】：Save data to local storage 【发布时间】：2014-07-07 18:35:04 【问题描述】：我正在尝试在本地存储中设置一堆变量，但函数没有运行，我尝试获取值但没有运气，如何在本地存储中保存字段？
function setPerson()
var person = 'name': getElementById('name'), 'photo': getElementById('photo');
// Put the object into the storage
alert(person);
localStorage.setItem('person', JSON.stringify(person));
;
HTML 在 html 中，我从字段中将值放入标签并填充它们，但是当我尝试获取它们并保存它们时，什么也没有发生......
我也尝试在那里取出固定值，然后显示警报，但它只说对象而不是值
var testObject = 'one': 1, 'two': 2, 'three': 3 ;
// Put the object into storage
localStorage.setItem('testObject', JSON.stringify(testObject));
// Retrieve the object from storage
var retrievedObject = localStorage.getItem('testObject');
alert('retrievedObject: ', JSON.parse(retrievedObject));;
【问题讨论】：
我以另一种形式调用它，我可以看到它被称为 不要使用alert进行调试，使用console！你有一个复杂的对象，所以alert 总是说[ObjectObject]
好的，还是不接受
如果你想使用 alert 你应该使用 '+' 而不是 ',': alert('retrievedObject: '+ JSON.parse(retrievedObject));
【参考方案1】：
你可以像这样使用 localStorage：
// Retrieve your data from locaStorage
var saveData = JSON.parse(localStorage.saveData || null) || ;
// Store your data.
function saveStuff(obj)
saveData.obj = obj;
// saveData.foo = foo;
saveData.time = new Date().getTime();
localStorage.saveData = JSON.stringify(saveData);
// Do something with your data.
function loadStuff()
return saveData.obj || "default";
jsFiddle
【讨论】：
喜欢 localStorage 的易用性。【参考方案2】：首先，您应该使用console 而不是alert。
而且，如果你想在某个地方使用检索到的对象，你最好将它存储在一个变量中：
var testObject = 'one': 1, 'two': 2, 'three': 3 ;
localStorage.setItem('testObject', JSON.stringify(testObject));
var retrievedObject = JSON.parse(localStorage.getItem('testObject'));
console.log('retrievedObject: ', retrievedObject);
【讨论】：
我相信 OP 意味着会话之间。【参考方案3】：W3C Schools 为您提供了有关如何使用 html 和本地存储的详细示例。
w3cSchools - Local Storage
【讨论】：
【参考方案4】：getElementById 应该改为
document.getElementById
这也会让你获得整个 DOM 元素。我假设您想要标签内的内容，所以我会说使用
document.getElementById('name').innerHTML
相反。 当您尝试对其进行字符串化时，仅引用 DOM 元素会给您一个循环结构错误。
我已确认有效的示例代码：
<html>
<head>
</head>
<body>
<p id="name">Hello</p>
<p id="photo">photo</p>
<script>
function setPerson()
var person = 'name': document.getElementById('name').innerHTML, 'photo': document.getElementById('photo').innerHTML;
// Put the object into storage
localStorage.setItem('person', JSON.stringify(person));
setPerson()
</script>
</body>
</html>
【讨论】：
【参考方案5】：问题在于getElementById 返回一个HTML 元素，它是一个对象。
然后，JSON.stringify 将尝试迭代它自己的属性。
但可能他们没有（除非您手动添加）。
既然你说它们是字段，你可以尝试保存它的value：
var person =
name: document.getElementById('name').value,
photo: document.getElementById('photo').value
;
【讨论】：
以上是关于将数据保存到本地存储的主要内容，如果未能解决你的问题，请参考以下文章