15

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

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

4

5 回答 5

21

您可以使用Web Storage API (Window.localStorage或Window.sessionStorage)。查看html5doctor上的这篇文章以获得更深入的解释。目前所有现代浏览器都支持Web Storage API。

只读的 localStorage 属性允许您访问 Document 来源的 Storage 对象；存储的数据跨浏览器会话保存。localStorage 与 sessionStorage 类似，不同之处在于，虽然 localStorage 中存储的数据没有过期时间，但sessionStorage 中存储的数据会在页面会话结束时（即页面关闭时）被清除。
https://developer.mozilla.org/en/docs/Web/API/Window/localStorage

如上所述：

有两种通过Window.localStorage和Window.sessionStorageAPI 设置和获取属性的方法：

  1. 直接访问属性：

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

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

  2. 使用Storage.setItem、Storage.getItem和Storage.removeItemAPI 方法。

    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

注意事项：

  • 浏览器可能会对Web Storage API的每个来源的存储容量施加限制，但您应该安全最多 5MB。
  • Web Storage API 受同源策略限制。
  • 如果用户在 Firefox 中禁用了第三方 cookie，则拒绝从第三方 IFrame 访问 Web 存储
于 2014-03-01T12:34:12.420 回答
12

您可以将数据存储在 中window.name，其中最多可容纳 2MB 的数据 (!)。

/* on page 1 */
window.name = "Bla bla bla";

/* on page 2 */
alert(window.name); // alerts "Bla bla bla"

编辑：还可以查看有关此的Ajaxian 文章。

请注意，同一选项卡/窗口中的其他站点也可以访问window.name，因此您不应在此处存储任何机密信息。

于 2009-04-03T15:30:43.210 回答
3

如果你真的需要这样做（我绝对怀疑这是一个好主意），你的额外 javascript 文件想法并不像你想象的那么糟糕。只需使用 JSON 表示法来保存数据，并且根据需要很容易加载和卸载。如果您保留一些经过深思熟虑的逻辑划分，您也应该能够按需更新其中的一部分。

于 2009-04-03T15:26:06.200 回答
3

谷歌齿轮怎么样。它是为离线存储而设计的，但我认为它可能会起作用。 http://code.google.com/apis/gears/design.html

从文档中：

存储用户数据

不仅仅是静态文件的应用程序具有通常存储在服务器上的数据。为了使应用程序在离线时有用，这些数据必须可以在本地访问。数据库模块提供了一个用于存储数据的关系数据库。在架构页面上，您将找到有关设计应用程序所需的本地存储的策略的讨论。

当离线应用程序重新连接时，您需要将本地数据库中所做的任何更改与服务器同步。同步数据有许多不同的方法，没有一种完美的方法。架构页面描述了一些同步策略。

Gears 数据库的一个附加功能是全文搜索，它提供了一种在数据库文件中搜索文本的快速方法。在此处阅读详细信息。

于 2009-04-03T15:51:34.593 回答
0

Web Storage API的本地存储限制为 5MB，但可以使用IndexedDB在客户端存储更多数据。在一些较新的浏览器中，还可以使用Service Workers缓存数据以供离线使用。

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

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

于 2021-02-05T00:13:36.863 回答