如何存储持久数据客户端

Question

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

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

Answer 1

您可以使用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.sessionStorage.

有两种通过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存储

Answer 2

您可以存储数据window.name,最多可存储2MB数据(!).

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

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

编辑:还看看这篇关于此的Ajaxian文章.

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