Differences between sessionstorage, localstorage, and cookie)

Source: Internet
Author: User

Sessionstorage and localstorage are provided by the HTML5 web storage API to conveniently store data between Web requests. With local data, you can avoid unnecessary data transmission between the browser and the server.
Sessionstorage, localstorage, and cookie are all data stored on the browser. The concept of sessionstorage is very special and introduces the concept of "browser window. Sessionstorage is the data that always exists in the same window (or tab) of the same source. That is to say, as long as the browser window is not closed, even if the page is refreshed or another page is accessed from the same source, the data still exists. When the window is closed, sessionstorage is destroyed. At the same time, the sessionstorage objects are different for different windows opened separately, even on the same page.
Benefits of Web storage: reduces network traffic: once the data is stored locally, you can avoid sending data requests to the server, thus reducing unnecessary data requests, reduces the amount of data transmitted between the browser and the server. Quick data display: the performance is good. Reading data locally is much faster than obtaining data from the server over the network, and local data can be obtained instantly. In addition, the webpage itself can also be cached. Therefore, if the entire page and data are both local, they can be immediately displayed. Temporary Storage: in many cases, data is only used when users browse a group of pages. When the window is closed, the data can be discarded. In this case, sessionstorage is very convenient.

Differences between browser local storage and server-side storageIn fact, data can be stored locally in the browser or on the server.
The browser can save some data and obtain it from the local machine when necessary. sessionstorage, localstorage, and cookie are all stored locally by the browser.
The server can also store all user data, but the browser needs to request data from the server when necessary. 1. The server can store users' persistent data, such as databases and cloud storage, to save a large amount of user data on the server. 2. The server can also save the user's temporary session data. The server-side session mechanism, such as the JSP Session object, stores data on the server. In implementation, the server and the browser only need to pass the session ID. The server finds the session object of the corresponding user based on the session ID. The session data is valid only for a period of time. This time is the session validity period set by the server.
The server saves all user data, so the server overhead is large, while the browser saves the data distribution required by different users in their respective browsers. Browsers are generally used to store small data, while servers can store big data or small data. The server stores data securely. Browsers are only suitable for storing general data.

Differences between sessionstorage, localstorage, and cookie
In common: both are stored on the browser side and are in the same source. Difference: cookie data is always carried in the same source HTTP Request (even if not required), that is, the cookie is transmitted back and forth between the browser and the server. Sessionstorage and localstorage do not automatically send data to the server and only save the data locally. Cookie data also has the concept of path, which can restrict the cookie to only belong to a specific path. The storage size limit is also different. The cookie data cannot exceed 4 kb. Because each HTTP request carries a cookie, the cookie is only suitable for storing small data, such as session IDs. Although sessionstorage and localstorage have limits on the storage size, they are much larger than cookies and can reach 5 MB or larger. Sessionstorage: Valid only before the current browser window is closed. It is naturally impossible to maintain persistence. localstorage: always valid. Windows or browsers are always saved and used as persistent data; the cookie is valid only until the specified cookie expires, even if the window or browser is closed. Different scopes, sessionstorageNoDifferent browser windows are shared, even on the same page. localstorage is shared in all same-source windows, and cookies are shared in all same-source windows. Web storage supports the event notification mechanism to send notifications of data updates to listeners. The Web storage API is more convenient to use.

 

SessionstorageAndDifferences between localstorageSee differences 3 and 4 above.


Differences between sessionstorage and page JS Data ObjectsThe general survival of JS objects or data on the page is only valid on the current page. Therefore, when you refresh the page or go to another page to reload the page, the data does not exist. As long as sessionstorage refreshes the page or enters different pages of the same source in the same window (or tab), data always exists. That is to say, as long as the browser window is not closed, the data still exists when a new page is loaded or reloaded.

 

Cookie, with a capacity of 4 kb, is supported by various browsers by default. The defect is that each request will send the Cookies stored on the local machine to the server, which is a waste of bandwidth.
Userdata, only supported by IE, with a single capacity of 64 KB, each domain name can store up to 10 data records totaling kb. By default, the files are saved in the C: \ Documents ents and Settings \ Administrator \ userdata \ directory, and saved in XML format. For more information about userdata refer to http://msdn.microsoft.com/library/default.asp? Url =/Workshop/author/behaviors/reference/behaviors/userdata. asp

Sessionstorage and localstorage

Web storage consists of sessionstorage and localstorage.

Sessionstorage is used to locally store data in a session. The data can be accessed only on pages in the same session. When the session ends, the data is also destroyed. Sessionstorage is not a persistent local storage, but a session-level storage.

Localstorage is used for persistent local storage. Unless data is actively deleted, the data will never expire.

Why web storage instead of cookies?

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

1. Larger storage space: each independent storage space in IE8 is 10 MB. the implementations of other browsers are slightly different, but they are much larger than cookies.

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

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, and each storage space is completely independent, so it will not cause data confusion.

How is compatibility?

The subsequent tests were conducted in the following browsers: IE8, firefox3.6, chrome5, safari4, and opera10. It turns out that the implementations of various browsers in API are basically consistent, there are some compatibility problems, but it does not affect normal use.

Differences between sessionstorage, localstorage, and cookie)

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.