Talk about HTML5 local storage technology_html5 tutorial skills

Local caching is a new technology that emerged in HTML5. The emergence of this technology makes the development of mobile web possible. We all know that when it comes to building a high-performance mobile app, speed is key. Before HTML5, only cookies could store data, and their size was only 4kb. This severely limits the storage of application files, resulting in long loading times for web-developed mobile applications. With local storage, web mobile applications can be closer to native.

In the browser, local storage is called through window.localStorage. The code to determine whether the browser supports local storage is as follows:

XML/HTML CodeCopy content to clipboard

1. if(window.localStorage){
2. alert('This browser supports localStorage');
3. }else{
4. alert('This browser does NOT supportlocalStorage');
5. } 

If we want to store data locally, the easiest way is to window. Add a property to localStorage and assign a value to it. For example, if we want to store a data name whose value is Tom, we can achieve it in the following way:

XML/HTML CodeCopy content to clipboard

1. window.localStorage.name = “Tom”

Note here that string variables require quotes. When we want to retrieve the data from local storage, we can use the getItem method. The entire code process is as follows:

JavaScript CodeCopy content to clipboard

1. var storage = window.localStorage;
2. storage.name = “Tom”;
3. //Get the name data
4. var name1 = storage.getItem(“name”);
5. alert(name1);

The display result of this code in the Chrome browser console is a prompt box showing Tom. It can be seen that we have correctly stored and read data in this way.

If we want to delete these stored data, we can use the removeItem method. Add the following code to the above code:

JavaScript CodeCopy content to clipboard

1. storage.removeItem(“name”);

At this time, when we alert again, null will be displayed because the data has been cleared.

After understanding some basic local storage usage and ideas, let’s systematically introduce local storage.

Local storage is divided into three major categories: localStorage/sessionStorage/local database

The usage, functions, calling methods, etc. of localStorage and sessionStorage are the same. They only have different meanings. Among them, the data stored in localStorage is valid for a long time, while the information stored in sessionStorage will be destroyed when each session is closed (in layman's terms, the data is automatically destroyed after the page is closed).

Due to the different characteristics of the two, the application scenarios are also very different. Usually, when we need to store some user configuration items and other data information that need to be stored for a long time, we need to use localStorgae to save it, taking advantage of its long-lasting characteristics. Correspondingly, when we need to implement session-based functions such as shopping carts, we need to use sessionStorage.

Since the usage of localStorage and sessionStorage are the same, we take localStorage as an example to introduce the methods of the two.

1. Set data setItem
The usage is localStorage.setItem("key", "value"), which means passing the value to key. (The usage method of sessionStorage.setItem is the same and will not be introduced one by one below)

2. Get data getItem
The usage is localStorage.getItem("key"). As long as you enter the corresponding key value, you can get the corresponding value value from it.

3. Delete specific data removeItem
The usage is localStorage.removeItem(key) to delete the data corresponding to the key.

4. Clear all data. The usage of clear
is localStorage.clear(), which means clearing all data in the storage system.

The above are some of the most basic sessionStorage/localStorage usage, I hope it will be helpful to everyone's learning.