使用 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 中， localStorage 和 sessionStorage 是允许您在浏览器中保存键值对的 Web 存储对象。但是，这些存储解决方案仅支持字符串，这意味着尝试直接存储 JavaScript 对象将导致该对象被转换为字符串表示形式，例如 [object Object]。为了有效地存储对象，您需要使用以下方法将它们转换为 JSON 字符串 JSON.stringify()。该方法接受一个 JavaScript 对象并返回一个 JSON 字符串，该字符串可以存储在 localStorage 或者 sessionStorage。
要检索存储的对象，您必须使用以下命令将 JSON 字符串转换回 JavaScript 对象 JSON.parse()。此方法接受 JSON 字符串并返回相应的 JavaScript 对象。上面示例中提供的脚本演示了此过程。首先，创建一个对象并将其转换为 JSON 字符串 JSON.stringify() 在存储之前 localStorage 使用 localStorage.setItem()。要检索对象，将从以下位置获取 JSON 字符串 localStorage 使用 localStorage.getItem() 然后使用解析回 JavaScript 对象 JSON.parse()。
在 localStorage 中存储和检索 JavaScript 对象
使用 JavaScript 和 JSON 进行本地存储
// Create an objectvar testObject = {'one': 1, 'two': 2, 'three': 3};// Convert the object to a JSON string and store it in localStoragelocalStorage.setItem('testObject', JSON.stringify(testObject));// Retrieve the JSON string from localStorage and convert it back to an objectvar retrievedObject = JSON.parse(localStorage.getItem('testObject'));// Verify the type and value of the retrieved objectconsole.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 }
在 sessionStorage 中存储和检索 JavaScript 对象
使用 JavaScript 和 JSON 进行 sessionStorage
// Create an objectvar testObject = {'one': 1, 'two': 2, 'three': 3};// Convert the object to a JSON string and store it in sessionStoragesessionStorage.setItem('testObject', JSON.stringify(testObject));// Retrieve the JSON string from sessionStorage and convert it back to an objectvar retrievedObject = JSON.parse(sessionStorage.getItem('testObject'));// Verify the type and value of the retrieved objectconsole.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 时 localStorage 和 sessionStorage，开发人员经常需要存储比字符串更复杂的数据。虽然 JSON 序列化和反序列化对于基本对象有效，但更高级的场景可能需要额外的考虑。例如，如果您正在使用深度嵌套的对象或包含方法的对象，则需要更复杂的方法。一种常见的技术是使用诸如 Flatted 或者 circular-json 处理循环引用和更复杂的对象结构。
这些库扩展了标准 JSON.stringify() 和 JSON.parse() 方法支持具有循环引用的对象的序列化和反序列化，从而为在 Web 存储中存储对象提供更强大的解决方案。另一个考虑因素是数据压缩。对于大型对象，您可以使用类似的库 19 号 在存储之前压缩数据 localStorage 或者 sessionStorage，减少空间使用量。这对于需要存储大量客户端数据的应用程序特别有用。
有关在 Web 存储中存储对象的常见问题
- 我可以将函数存储在 localStorage 或者 sessionStorage？
- 不可以，函数不能直接存储在网络存储中。您可以将函数代码存储为字符串并使用 eval() 重新创建它，但由于安全风险，通常不建议这样做。
- 如何处理对象中的循环引用？
- 使用类似的库 Flatted 或者 circular-json 它们旨在处理 JavaScript 对象中的循环引用。
- 存储限制是多少 localStorage？
- 存储限制为 localStorage 通常约为 5MB，但它可能因浏览器而异。
- 我可以在存储数据之前对其进行压缩吗？
- 是的，您可以使用类似的库 LZ-String 在将数据存储之前对其进行压缩 localStorage 或者 sessionStorage。
- 如何存储对象数组？
- 使用以下命令将数组转换为 JSON 字符串 JSON.stringify() 在将其存储之前 localStorage 或者 sessionStorage。
- 将敏感数据存储在其中是否安全 localStorage？
- 不，将敏感数据存储在其中并不安全 localStorage 因为它可以通过 JavaScript 访问，并且如果网站受到攻击，它可能会受到损害。
- 我可以用吗 localStorage 跨不同领域？
- 不， localStorage 限制为同源，这意味着不能跨域访问。
- 如果用户清除浏览器数据会发生什么？
- 所有数据存储在 localStorage 和 sessionStorage 如果用户清除浏览器数据，该信息将被删除。
关于管理对象存储的最终想法
在 HTML5 Web 存储中有效存储和检索对象需要将对象转换为 JSON 字符串 JSON.stringify() 然后用 JSON.parse()。此方法可确保数据在不同的浏览器会话中保持完整且可用。通过理解和利用这些技术，开发人员可以利用 localStorage 和 sessionStorage 来执行更复杂的数据管理任务，从而增强 Web 应用程序的功能和性能。