Question

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

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

Answer 1

您可以将数据存储在window.name中，最多可容纳2MB的数据（！）。

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

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

修改：另请参阅this Ajaxian article。

请注意，同一标签/窗口中的其他网站也可以访问window.name，因此您不应在此处存储任何机密内容。

Answer 2

您可以使用Web Storage API（Window.localStorage或Window.sessionStorage）。查看this article on html5doctor以获得更深入的解释。此时Web Storage API为supported by all modern browsers。

只读的localStorage属性允许您访问Document的源的Storage对象; 存储的数据会在浏览器会话中保存。 localStorage类似于sessionStorage，但是当localStorage中存储的数据没有到期时间时，存储在sessionStorage中的数据会在页面会话结束时清除 - 也就是说，当页面关闭时。 ^{https://developer.mozilla.org/en/docs/Web/API/Window/localStorage}

如上所述：

要无限期地存储数据（直到清除缓存），请使用Window.localStorage。
要在窗口关闭之前存储数据，请使用Window.sessionStorage。

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

直接访问属性：

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

使用Storage.setItem，Storage.getItem和Storage.removeItem API方法。

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访问网络存储

Answer 3

如果你真的需要这样做（而且我绝对怀疑这是一个好主意），你的额外的javascript文件想法并没有那么糟糕您认为。只需使用JSON表示法来保存数据，并且可以根据需要轻松加载和卸载。如果你保持一些经过深思熟虑的逻辑部门，你也应该能够按需更新部分内容。

Answer 4

Google Gears怎么样？它是为离线存储而制作的，但我认为它可能有效。 http://code.google.com/apis/gears/design.html

来自文档：

存储用户数据

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

离线申请时   重新连接，你需要   同步中所做的任何更改   本地数据库与服务器。那里   有很多不同的方法   同步数据，没有   单一的完美方法。该   架构页面描述了一些   同步策略。

Gears的另一个功能   数据库是全文搜索，   提供快速搜索文本的方式   在数据库文件中。阅读   详情请点击。

Answer 5

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

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

客户端存储通常仅限于一个来源，但可以使用 postMessage() share it between origins。

如何存储持久数据客户端

5 个答案:

注意事项：