Talk about HTML5 local storage technology and HTML5 Storage Technology

Talk about HTML5 local storage technology and HTML5 Storage Technology

Local cache is a new HTML5 technology, which makes mobile web development possible. We all know that speed is the key to creating a high-performance mobile application. Before HTML5, only cookies can store data, with a size of only 4 kb. This severely limits the storage of Application Files, resulting in a long loading time for mobile applications developed by the web. With local storage, web mobile applications can be closer to the native.

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

Copy XML/HTML Code to clipboard

1. If (window. localStorage ){
2. Alert ('this browser supports localstore ');
3. } Else {
4. Alert ('this browser does NOT supportlocalstore ');
5. }

If we want to store data locally, the simplest method is window. Add an attribute to localStorage and assign values to it. For example, if we want to store a data name whose value is Tom, we can achieve this through the following method:

Copy XML/HTML Code to clipboard

1. Window. localStorage. name = "Tom"

Note that string variables must be enclosed in quotation marks. When we want to retrieve the data market in the local storage, we can use the getItem method. The entire code process is as follows:

Copy the content to the clipboard using JavaScript Code

1. Var storage = window. localStorage;
2. Storage. name = "Tom ";
3. // Retrieve name Data
4. Var name1 = storage. getItem ("name ");
5. Alert (name1 );

The result displayed in the Chrome console is a prompt box showing Tom. It can be seen that we have properly stored and read data in this way.

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

Copy the content to the clipboard using JavaScript Code

1. Storage. removeItem ("name ");

At this time, when alert is used again, null is displayed because the data has been cleared.

After learning about some basic local storage usage and ideas,Let's introduce local storage..

Local Storage is divided into three categories:LocalStorage/sessionStorage/local database

LocalStorage and sessionStorage have the same usage, functions, and call methods. They only have different meanings. The data stored by localStorage is valid for a long time, and the information stored by sessionStorage is used for each session) the data will be destroyed when the page is closed (in other words, the data will be destroyed automatically after the page is closed ).

Because of their different features, the application scenarios are also very different. Generally, when we need to store some user configuration items and other data information that requires long-term storage, we need to use localStorgae for storage, taking advantage of its long validity period. Correspondingly, when we need to implement session-based functions like shopping cart, we need to use sessionStorage.

Because localStorage and sessionStorage have the same usage, we use localStorage as an example to introduce the methods of both.

1. Set setItem
Use localStorage. setItem ("key", "value") to pass the value to the key. (SessionStorage. setItem is used in the same way. We will not describe it one by one here)

2. Get Data getItem
The usage is localStorage. getItem ("key"). You only need to enter the corresponding key value to retrieve the corresponding value.

3. delete a specific data removeItem
Use localStorage. removeItem (key) to delete data corresponding to the key.

4. clear all data clear
LocalStorage. clear () indicates clearing all data in the storage system.

The above are some of the most basic sessionStorage/localStorage usage. I hope it will be helpful for your learning.