The development of web applications has led to the increasing use of client-side storage, and there are various ways to implement client-side storage. The simplest and most compatible solution is Cookie, but as a real client-side storage, Cookie has many fatal flaws. In addition, userData Behavior can also be used in IE6 and above, globalStorage can be used under Firefox, and Flash Local Storage can be used in environments with Flash plug-ins. However, these methods all have compatibility limitations, so they are really Not ideal to use. In response to the above situation, HTML5 provides a more ideal solution: if you need to store complex data, you can use Web Database , and you can use SQL like a client program (but the Web Database standard is currently in a deadlock, and currently The browsers that have been implemented are very limited); if you need to store data that can be solved simply with key/value pairs, you can use Web Storage . This article mainly introduces the specific situation of Web Storage from various aspects.
sessionStorage and localStorage
Web Storage actually consists of two parts: sessionStorage and localStorage.
sessionStorage is used to locally store data in a session. This data can only be accessed by pages in the same session and the data is destroyed when the session ends. Therefore sessionStorage is not a persistent local storage, only session-level storage.
localStorage is used for persistent local storage. Unless the data is actively deleted, the data will never expire.
Why choose Web Storage over Cookies?
Compared with Cookies, Web Storage has many advantages, which are summarized as follows:
1. Larger storage space: Each independent storage space under IE8 is 10M. The implementation of other browsers is slightly different, but it is much larger than Cookie.
2. The stored content will not be sent to the server: When a cookie is set, the cookie content will be sent to the server along with the request, which is a waste of bandwidth for locally stored data. The data in Web Storage only exists locally and does not interact with the server in any way.
3. More rich and easy-to-use interfaces: Web Storage provides a richer set of interfaces, making data operations easier.
4. Independent storage space: Each domain (including subdomains) has an independent storage space. Each storage space is completely independent, so there will be no data confusion.
How is the compatibility?
The following various tests were conducted in the following browsers: IE8, Firefox3.6, Chrome5, Safari4, Opera10. It turns out that the implementation of APIs in each browser is basically the same, and there are certain compatibility issues, but they are not affect normal use.
sessionStorage test
This section mainly tests some features of sessionStorage. The focus of the test is on the definition of session by each browser and the cross-domain situation. The test method is very simple: open page A , write the current session data in page A, and then use different methods to enter page B through the links or buttons in page A. If page B can access the data in page A This means that the browser regards the current pages A and B as the same session. The specific results of the test are shown in Table 1:
Table 1 sessionStorage compatibility test
As can be seen from Table 1, for security reasons, session data is not allowed to be accessed across domains in all browsers, including cross-subdomains. In other aspects, the implementation in mainstream browsers is relatively consistent.