Cookie,sessionstorage,localstorage

Source: Internet
Author: User
Tags set cookie sessionstorage

This article turns

Sessionstorage and Localstorage are provided by the HTML5 Web Storage API, which makes it easy to save data between Web requests. With local data, you can avoid data being passed back and forth unnecessarily between the browser and the server.
Sessionstorage, Localstorage, and cookies are all data stored on the browser side, where the concept of sessionstorage is unique and introduces the concept of a "browser window". Sessionstorage is the data that is always present in the same window (or tab) of the same origin. This means that as long as this browser window is not closed, even if you refresh the page or go to another page of the same origin, the data still exists. When the window is closed, Sessionstorage is destroyed. The Sessionstorage objects are also different, even on the same page, when the separate windows are open independently.
The benefits of Web Storage: Reduce network traffic: Once the data is stored locally, you can avoid requesting data from the server, thereby reducing unnecessary data requests and reducing the need for data to be passed back and forth unnecessarily between the browser and the server. Fast display of data: Good performance, read data from the local than through the network to obtain data from the server much faster, local data can be instantly available. In addition, the Web page itself can be cached, so the entire page and data are local, can be displayed immediately. Temporary storage: Most of the time the data needs to be used only when the user browses a set of pages, and the data can be discarded when the window is closed, which is very convenient to use sessionstorage.

Differences between browser-local storage and server-side storage

In fact, the data can be stored either locally in the browser or on the server side.
Browser-side can save some data, need to get directly from the local, Sessionstorage, localstorage and cookies are stored locally by the browser data.
The server side can also save all data for all users, but when needed, the browser requests data from the server. 1. The server side can save the user's persistent data, such as the database and cloud storage to save the user's large amount of data on the server side. 2. The server side can also save the user's temporary session data. Server-side session mechanism, such as the JSP session object, the data is saved on the server. On the implementation, the server and the browser only need to pass the session ID, the server based on the session ID to find the corresponding user session object. Session data is only valid for a period of time, which is the session expiration date set by the server side.
Server-side Save all the user's data, so the server-side overhead, and browser-side save the different users need to save the data distribution in the user's respective browser. The browser side is generally used only to store small data, and the server can store big data or small data. Server storage data security, the browser is only suitable for storing general data.

the difference between sessionstorage, localstorage, and Cookies
Common: All are saved in the browser side, and the same origin. Difference: Cookie data is always carried in the same-Origin HTTP request (even if not required), that is, the cookie is passed back and forth between the browser and the server. Sessionstorage and Localstorage do not automatically send data to the server and are saved locally only. The cookie data also has the concept of path, which limits the cookie to only one path. The storage size limit is also different, the cookie data cannot exceed 4k, and because each HTTP request carries a cookie, the cookie is only suitable for storing very small data, such as a session ID. Sessionstorage and Localstorage have a storage size limit, but are much larger than cookies and can reach 5M or larger. Data validity period is different, Sessionstorage: only when the current browser window is closed before it is valid, nature will not be able to persist; Localstorage: always valid, window or browser Close is also saved, so it is used as persistent data; Cookie expires only in Set cookie Time until the window or browser is closed. Different scopes, sessionstoragenot inDifferent browser windows are shared, even on the same page; Localstorage are shared across all homologous windows, and cookies are shared across all homologous windows. The Web Storage supports event notification mechanisms that can send notifications of data updates to listeners. The Web Storage API interface is more convenient to use.

Sessionstorage and the the difference between the Localstorage see above Difference 3, 4


sessionstorage The difference between the page JS data object and the general JS object or data in the page is valid only on the current page, so if you refresh the page or go to another page to reload the page, the data does not exist. and Sessionstorage as long as the same source of the same window (or tab), refresh the page or enter the same origin of the different pages, data always exists. This means that as long as this browser window is not closed, loading a new page or reloading, the data still exists.

Cookies, capacity 4KB, the default various browsers are supported, the flaw is every request, the browser will be stored in the local cookies sent to the server, virtually wasting bandwidth.
UserData, only IE support, a single capacity of 64KB, each domain name can save up to 10 total 640k data. It is saved by default in the C:\Documents and Settings\administrator\userdata\ directory and is saved in XML format.

More information about UserData reference http://msdn.microsoft.com/library/default.asp?url=/workshop/author/behaviors/reference/ Behaviors/userdata.asp

Sessionstorage and Localstorage

The Web storage actually consists of two parts: Sessionstorage and Localstorage.

Sessionstorage is used to store data locally in a session, which can only be accessed by a page in the same session and destroyed when the session ends. So sessionstorage is not a persistent local store, only session-level storage.

Localstorage is used for persistent local storage, and the data is never expired unless the data is actively deleted.

Why choose web Storage instead of cookies?

Compared with cookies, WEB storage has many advantages, which are summarized as follows:

1. More storage space: each individual storage space under IE8 is 10M, other browsers are slightly different, but much larger than cookies.

2. Stored content is not sent to the server: When a cookie is set, the content of the cookie is sent along with the request, which is a waste of bandwidth for locally stored data. The data in the Web Storage is only present locally and does not interact with the server.

3. More rich and easy to use interface: WEB storage provides a richer set of interfaces, making data manipulation easier.

4. Separate storage space: each domain (including subdomains) has separate storage space, each storage space is completely independent, so it does not cause data confusion.

How is compatibility?

The next kinds of tests are done in the following browsers: IE8, Firefox3.6, Chrome5, Safari4, OPERA10, the fact that each browser implementation of the API is basically consistent, there are some compatibility issues, but does not affect the normal use.

Cookie,sessionstorage,localstorage

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.