Javascript 如何在客户端存储持久数据

我需要以编程方式在客户端存储数据，而不必在每次页面加载时从服务器传输数据。我考虑过为用户的当前会话生成一个包含所需数据的动态JavaScript文件，并确保它被缓存，但这看起来非常混乱，我可以想到这种方法存在一些缺点

---

如何在客户端存储持久性数据？

如果您真的需要这样做（我肯定怀疑这是一个好主意），那么您额外的javascript文件想法并没有您想象的那么糟糕。只需使用JSON符号来保存数据，就可以根据需要轻松地加载和卸载数据。如果您保留了一些经过深思熟虑的逻辑分区，那么您应该能够根据需要只更新其中的一部分。

您可以将数据存储在

窗口中。name

，它最多可以容纳2MB的数据（！）

编辑：也可以看看这一点

---

请注意，同一选项卡/窗口中的其他站点也可以访问

window.name

，因此您不应该在此处存储任何机密信息。

Google Gears呢。它是为离线存储而设计的，但我认为它可能会工作。

从文件中：

存储用户的数据

不仅仅是 静态文件的数据是 通常存储在服务器上。对于 该应用程序将在脱机时有用， 这些数据必须可以在本地访问。 数据库模块提供了一个 用于存储数据的关系数据库。 在架构页面上，您将找到 关于企业战略的探讨 设计所需的本地存储 应用程序需要

当脱机应用程序 重新连接时，您将需要 同步在中所做的任何更改 服务器的本地数据库。那里 有许多不同的方法来解决这个问题 正在同步数据，并且没有 单一完美的方法。这个 架构页面描述了一些 同步策略

齿轮的另一个特点 数据库是全文搜索， 提供一种快速搜索文本的方法 在数据库文件中。阅读 详情请看这里

您可以使用（或）。查看以获得更深入的解释。问题就在这一点上

只读localStorage属性允许您访问文档来源的存储对象跨浏览器会话保存存储的数据。localStorage与sessionStorage类似，不同之处在于，虽然localStorage中存储的数据没有过期时间，但当页面会话结束时，即页面关闭时，sessionStorage中存储的数据将被清除。

如上所述：

• 要无限期地存储数据（直到清除缓存），请使用
• 要存储数据直到窗口关闭，请使用

有两种通过和API设置和获取属性的方法：

直接访问属性：

localStorage.name = 'ashes999';
console.log(localStorage.name); // ashes999
delete localStorage.name;
console.log(localStorage.name); // undefined

使用、和API方法

localStorage.setItem('name', 'ashes999');
console.log(localStorage.getItem('name')); // ashes999
localStorage.removeItem('name');
console.log(localStorage.getItem('name')); // undefined

注意事项：

• 浏览器可能会对每个源的存储容量施加限制，但您应该安全到5MB
• Web存储API受同源策略的限制
• 如果用户在Firefox中禁用了第三方cookie，则拒绝从第三方iFrame访问Web存储

Web存储API提供了本地存储，但也可以在客户端使用。在一些较新的浏览器中，还可以使用缓存数据以供脱机使用

URL片段也可以存储客户端数据，尽管它们只能存储在大多数浏览器中

---

客户端存储通常仅限于一个来源，尽管可以使用

postMessage（）

此方法似乎存在一些安全问题。你以前用过吗？您发现了任何潜在的问题吗？是的，我使用过它（不过主要用于缓存）。同一选项卡/窗口中的其他站点可能会读取或写入窗口名称，因此这不是一个真正安全的存储数据的地方–但对于缓存等，我认为这是很好的。这些其他站点也可能会覆盖您的数据，因此也不是很可靠。您知道这有多兼容吗（例如，所需的最低浏览器、移动设备等）随着新技术的出现，这个答案现在已经过时了。即使给出了这个答案，这也是一个非常糟糕的想法。

window.name

属性不是用来保存状态的。需要在浏览器中安装一个额外的组件，这违反了他的一个要求。哇，太好了，刚刚被否决了一个8年前的答案，这在回答时很有意义，但到目前为止，它已经完全偏离了轨道。我在这里对您的答案进行了编辑，以扩展您的答案，因为这是目前最容易找到的重复目标，而且Web存储API方法的代表性有点不足。如果我的编辑偏离了您答案的初衷，或者被发现有任何有害之处，请随意将其回滚。@TinyGiant我认为您几乎重写了我的答案。我宁愿你把它贴成你自己的（并让你自己的代表为此而受到赞扬）；特别是考虑到这不是目前被接受的、也不是最受欢迎的答案。如果你觉得这太多了，不用担心，我不会退后。我不想再添加一个答案，说明这里已经说过了什么。我也不太在乎从中获得的销售代表。我只是关心这里的Q&A在堆栈溢出问题上的有用性。@TinyGiant好吧，那么我想我们同意保持现状。谢谢你让我知道。@Itay我编辑这个问题是因为它被用作新问题的重复目标，我认为它需要一些清理和组织。@TinyGiant真的吗？那太可怕了。这里的大多数答案中的信息都有点陈旧，因为html5本地存储现在使用起来非常安全。@Joel，这就是我扩展Web存储API的原因

sessionStorage.name = 'ashes999';
console.log(sessionStorage.name); // ashes999
delete sessionStorage.name;
console.log(sessionStorage.name); // undefined

localStorage.setItem('name', 'ashes999');
console.log(localStorage.getItem('name')); // ashes999
localStorage.removeItem('name');
console.log(localStorage.getItem('name')); // undefined

sessionStorage.setItem('name', 'ashes999');
console.log(sessionStorage.getItem('name')); // ashes999
sessionStorage.removeItem('name');
console.log(sessionStorage.getItem('name')); // undefined