在 HTML5 localStorage 和 sessionStorage 中存储 JavaScript 对象

使用 Web 存储中的对象

使用 HTML5 localStorage 或 sessionStorage 时，开发人员在尝试存储 JavaScript 对象时经常会遇到问题。与原始数据类型和数组不同，对象似乎被转换为字符串，这可能会导致混乱和意外结果。

了解如何使用 Web 存储正确存储和检索对象对于许多 Web 应用程序至关重要。本指南将探讨为什么对象被转换为字符串，并提供一个简单的解决方法来确保正确存储和检索对象。

命令	描述
JSON.stringify()	将 JavaScript 对象或值转换为 JSON 字符串，允许存储在 localStorage 或 sessionStorage 中。
localStorage.setItem()	将键值对存储在 localStorage 对象中，允许数据在浏览器会话中保留。
localStorage.getItem()	从 localStorage 检索与给定键关联的值。
JSON.parse()	解析 JSON 字符串并将其转换回 JavaScript 对象，从而能够检索复杂的数据结构。
sessionStorage.setItem()	在 sessionStorage 对象中存储键值对，允许数据在页面会话期间持续存在。
sessionStorage.getItem()	从 sessionStorage 中检索与给定键关联的值。

在 Web 存储中有效存储和检索对象

在 JavaScript 中， 和 是允许您在浏览器中保存键值对的 Web 存储对象。但是，这些存储解决方案仅支持字符串，这意味着尝试直接存储 JavaScript 对象将导致该对象被转换为字符串表示形式，例如 。为了有效地存储对象，您需要使用以下方法将它们转换为 JSON 字符串 JSON.stringify()。该方法接受一个 JavaScript 对象并返回一个 JSON 字符串，该字符串可以存储在 或者 。

要检索存储的对象，您必须使用以下命令将 JSON 字符串转换回 JavaScript 对象 。此方法接受 JSON 字符串并返回相应的 JavaScript 对象。上面示例中提供的脚本演示了此过程。首先，创建一个对象并将其转换为 JSON 字符串 在存储之前 使用 localStorage.setItem()。要检索对象，将从以下位置获取 JSON 字符串 使用 然后使用解析回 JavaScript 对象 。

// Create an object
var testObject = {'one': 1, 'two': 2, 'three': 3};

// Convert the object to a JSON string and store it in localStorage
localStorage.setItem('testObject', JSON.stringify(testObject));

// Retrieve the JSON string from localStorage and convert it back to an object
var retrievedObject = JSON.parse(localStorage.getItem('testObject'));

// Verify the type and value of the retrieved object
console.log('typeof retrievedObject: ' + typeof retrievedObject);
console.log('Value of retrievedObject: ', retrievedObject);

// Output should be:
// typeof retrievedObject: object
// Value of retrievedObject: { one: 1, two: 2, three: 3 }

// Create an object
var testObject = {'one': 1, 'two': 2, 'three': 3};

// Convert the object to a JSON string and store it in sessionStorage
sessionStorage.setItem('testObject', JSON.stringify(testObject));

// Retrieve the JSON string from sessionStorage and convert it back to an object
var retrievedObject = JSON.parse(sessionStorage.getItem('testObject'));

// Verify the type and value of the retrieved object
console.log('typeof retrievedObject: ' + typeof retrievedObject);
console.log('Value of retrievedObject: ', retrievedObject);

// Output should be:
// typeof retrievedObject: object
// Value of retrievedObject: { one: 1, two: 2, three: 3 }

Web 存储的高级技术

使用 HTML5 时 和 ，开发人员经常需要存储比字符串更复杂的数据。虽然 JSON 序列化和反序列化对于基本对象有效，但更高级的场景可能需要额外的考虑。例如，如果您正在使用深度嵌套的对象或包含方法的对象，则需要更复杂的方法。一种常见的技术是使用诸如 或者 circular-json 处理循环引用和更复杂的对象结构。

这些库扩展了标准 和 方法支持具有循环引用的对象的序列化和反序列化，从而为在 Web 存储中存储对象提供更强大的解决方案。另一个考虑因素是数据压缩。对于大型对象，您可以使用类似的库 在存储之前压缩数据 localStorage 或者 ，减少空间使用量。这对于需要存储大量客户端数据的应用程序特别有用。

1. 我可以将函数存储在 或者 ？
2. 不可以，函数不能直接存储在网络存储中。您可以将函数代码存储为字符串并使用 重新创建它，但由于安全风险，通常不建议这样做。
3. 如何处理对象中的循环引用？
4. 使用类似的库 或者 它们旨在处理 JavaScript 对象中的循环引用。
5. 存储限制是多少 ？
6. 存储限制为 通常约为 5MB，但它可能因浏览器而异。
7. 我可以在存储数据之前对其进行压缩吗？
8. 是的，您可以使用类似的库 在将数据存储之前对其进行压缩 或者 。
9. 如何存储对象数组？
10. 使用以下命令将数组转换为 JSON 字符串 在将其存储之前 或者 。
11. 将敏感数据存储在其中是否安全 ？
12. 不，将敏感数据存储在其中并不安全 因为它可以通过 JavaScript 访问，并且如果网站受到攻击，它可能会受到损害。
13. 我可以用吗 跨不同领域？
14. 不， 限制为同源，这意味着不能跨域访问。
15. 如果用户清除浏览器数据会发生什么？
16. 所有数据存储在 和 如果用户清除浏览器数据，该信息将被删除。

在 HTML5 Web 存储中有效存储和检索对象需要将对象转换为 JSON 字符串 然后用 。此方法可确保数据在不同的浏览器会话中保持完整且可用。通过理解和利用这些技术，开发人员可以利用 localStorage 和 sessionStorage 来执行更复杂的数据管理任务，从而增强 Web 应用程序的功能和性能。