[HTML] Don’t you want to take a look at HTML5’s WebStorage?

[HTML] Don’t you want to take a look at HTML5’s WebStorage?

Interviewer: Tell me about the difference between sessionStorage and localStorage?

Answer: en~, one is limited, the other is not?

Technology selection: Make an offline data cache!

Answer: It seems that it can be realized, just use it casually?

introduction

Content Express: What you can learn after reading this article!

1. What is HTML5 Web Storage

It is a technology that can store user's browsing data locally.

The main purpose is to overcome some limitations brought by cookies. When the data needs to be strictly controlled on the client side, and there is no need to continuously send the data back to the server, then WebStorage will be used.

2. Two main goals of WebStorage

Provides a way to store session data outside of cookies.

Provides a mechanism for storing large amounts of data that can exist across sessions.

3、Web Storage

HTML5 provides two objects for storing data on two clients:

• sessionStorageMaintain a separate storage area for each given origin that is available for the duration of the page session (i.e. as long as the browser is open, including page reloads and resumes).
• localStorageSame functionality, but the data persists after the browser is closed, then reopened.

4、sessionStorage

It is used to temporarily save the data of the same window (or tab), which will be deleted after closing the window or tab.

4.1. Features

• The page session is maintained for as long as the browser is open, and reloading or restoring the page will still maintain the original page session.
• **When a page is opened in a new tab or window, the context of the top-level browsing session is copied as the context of the new session,** this is different from the way session cookies work.
• Open multiple Tabs pages with the same URL, each will be created sessionStorage.
• Closing the corresponding browser tab or window will clear the corresponding sessionStorage.

http://example.comhttps://example.comIsolated from sessionStorage

4.2、API

• Save data: sessionStorage.setItem(key,value);
• Read data: sessionStorage.getItem(key);
• Delete a single data: sessionStorage.removeItem(key);
• Delete all data: sessionStorage.clear();
• Get the key of an index: sessionStorage.key(index);

5、localStorage

It is used to save the data of the entire website for a long time. The saved data has no expiration time until it is manually removed.

5.1. Features

• Stored data does not expire as the user's browsing session expires, but is deleted at the user's request
• Browsers are also deleted due to storage space limitations or security reasons
• Stored data can be shared across multiple windows of the same browser

Only strings can be stored. If it is jsonan object, the object can be JSON.stringify() encoded and stored

5.2、API

• Save data: localStorage.setItem(key,value);
• Read data: localStorage.getItem(key);
• Delete a single data: localStorage.removeItem(key);
• Delete all data: localStorage.clear();
• Get the key of an index: localStorage.key(index);

6. The difference between sessionStorage and localStorage

1. Life cycle

The life cycle of localStorage is permanent, and the data in localStorage will not disappear after closing the page or browser. LocalStorage data will never disappear unless it is actively deleted.

The life cycle of sessionStorage is valid only in the current session. sessionStorage introduces the concept of a "browser window". sessionStorage is data that always exists in windows of the same origin. As long as the browser window is not closed, the data still exists even if the page is refreshed or another page of the same origin is entered. But sessionStorage will be destroyed after closing the browser window. At the same time, the same window and the same page are opened independently, and the sessionStorage is also different.

2. Storage size

The storage data size of localStorage and sessionStorage is generally: 5MB.

3. Storage location

Both localStorage and sessionStorage are stored on the client side and do not interact with the server.

4. Storage content type

localStorage and sessionStorage can only store string types. For complex objects, stringify and parse of JSON objects provided by ECMAScript can be used to process them.

7. Advantages of WebStorage

Note: Here is WebStorage compared to cookies.

1. Larger storage space

The cookie is 4KB and the WebStorage is 5MB.

2. Save network traffic

WebStorage will not be transmitted to the server, and the data stored locally can be obtained directly, and it will not be transmitted to the server for every request like cookies, so the interaction between the client and the server is reduced, and network traffic is saved.

3. Convenience

For the kind of data that only needs to be saved while the user browses a set of pages and can be discarded after closing the browser, sessionStorage will be very convenient;

4. Security

WebStorage will not be sent to the server with the HTTP header, so the security is higher than that of cookies, and there is no worry about interception, but there are still forgery problems;

8. Summary

The use of sessionStorage and localStorage is increasing, and it has gradually become a necessary front-end knowledge. More detailed usage still needs to be refined and deepened in daily work. The biggest role of this article is to review the old knowledge, check for omissions and fill in the gaps!

Now that I have seen this, I am reconstructing the front-end knowledge system, do you want to join me?

Good series

HTML History: 【HTML】Would you still read HTML? Take you to review or walk into

HTML tags: 【HTML】Take you back to those vaguely remembered tags in HTML

HTML video: 【HTML】Talk about how to play HTML5 video

HTML audio: [HTML] Changes brought by HTML5 to web audio

HTML semantics: [HTML] Talk about the understanding of HTML5 semantics

HTML positioning: 【HTML】HTML5's new feature Geolocation

HTML drag and drop: 【HTML】Have you used HTML5 drag and drop?

HTML cache: [HTML] Why don't you take a look at HTML5's WebStorage?

HTML Application Cache: 【HTML】HTML5 Application Cache

HTML的Web Werkors：【HTML】HTML5的Web Werkors

Blog Description and Acknowledgments

Some of the information involved in the article comes from the Internet, which contains my own personal summary and opinions. The purpose of sharing is to build a community and strengthen myself.

If the referenced material is infringing, please contact me to delete it!

Thanks to the almighty network, W3C, rookie tutorials, etc.!

Thank you for your hard work , blog , GitHub learning , GitHub

If you feel that it is helpful to you, you might as well give me a thumbs up to encourage me, remember to collect good articles! Follow me and grow together!

Luckily I'm here, thanks for coming!