如何存储持久数据客户端

I need to programmatically store data on the client side without having to transfer the data from the server on every page load. I considered generating a dynamic JavaScript file with the needed data for the current session of the user and make sure it is cached, but that seems really messy and there are a few drawbacks I can think of to such an approach.

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

How can I go about storing persistent data on the client side?

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

4 个解决方案

#1

You may store data in window.name, which can hold up to 2MB of data (!).

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

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

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

Edit: Also have a look at this Ajaxian article regarding this.

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

Note that other sites in the same tab/window does also have access to window.name, so you shouldn't store anything confidential here.

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

#2

You can use the Web Storage API (Window.localStorage or Window.sessionStorage). Check out this article on html5doctor for a more in-depth explanation. The Web Storage API is supported by all modern browsers at this point.

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

The read-only localStorage property allows you to access a Storage object for the Document's origin; the stored data is saved across browser sessions. localStorage is similar to sessionStorage, except that while data stored in localStorage has no expiration time, data stored in sessionStorage gets cleared when the page session ends — that is, when the page is closed.
^{https://developer.mozilla.org/en/docs/Web/API/Window/localStorage}

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

As highlighted above:

如上所述:

• To store the data indefinitely (until the cache is cleared), use Window.localStorage.

要无限期地存储数据(直到清除缓存),请使用Window.localStorage。

• To store the data until the window is closed, use Window.sessionStorage.

要在窗口关闭之前存储数据,请使用Window.sessionStorage。

There are two methods of setting and getting properties via the Window.localStorage and Window.sessionStorage API's:

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

1. Access the properties directly:

   直接访问属性:

   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. Use the Storage.setItem, Storage.getItem, and Storage.removeItem API methods.

   使用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
   

Caveats:

• Browsers may impose limitations on the storage capacity per origin of the Web Storage API, but you should be safe up to 5MB.

浏览器可能会对Web Storage API的每个源的存储容量施加限制,但您应该安全高达5MB。

• The Web Storage API is limited by the same origin policy.

Web Storage API受相同源策略的限制。

• Access to Web Storage from third-party IFrames is denied if the user has disabled third-party cookies in Firefox

如果用户在Firefox中禁用了第三方cookie,则拒绝从第三方IFrame访问Web存储

#3

If you really need to do this (and I definitely have doubts that it's a good idea at all), your extra javascript file idea isn't as bad as you think. Just use JSON notation to keep the data and it's pretty easy to load and unload as needed. If you keep in some well-thought-out logical divisions you should be able to update just parts of it on demand, as well.

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

#4

What about Google Gears. It is made for offline storage, but I think it might work. http://code.google.com/apis/gears/design.html

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

From the documentation:

从文档:

Storing User's Data

存储用户数据

Applications that are more than just static files have data that is typically stored on the server. For the application to be useful offline, this data must be accessible locally. The Database module provides a relational database for storing data. On the Architecture page you will find a discussion of strategies for designing the local storage that your application needs.

不仅仅是静态文件的应用程序具有通常存储在服务器上的数据。要使应用程序脱机使用,必须在本地访问此数据。数据库模块提供用于存储数据的关系数据库。在Architecture页面上,您将找到有关设计应用程序所需的本地存储的策略的讨论。

When an offline application reconnects, you will need to synchronize any changes made in the local database with the server. There are many different approaches to synchronizing data, and there is no single perfect approach. The Architecture page describes some strategies for synching.

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

An additional feature of the Gears database is Full-Text Search, providing a fast way to search text within a database file. Read the details here.

Gears数据库的另一个功能是全文搜索,提供了一种在数据库文件中搜索文本的快速方法。在这里阅读详细信息。