[Html5] html5 local storage and html5 Storage

[Html5] html5 local storage and html5 Storage

I have been studying html5 for a long time, so I can reserve knowledge for future mobile projects. Compared with html4, html5 adds some interesting labels, attributes, and methods. Today we will introduce the local storage of html5.

Store data on the client

Html5 provides two new methods to store data on the client:

• LocalStorage-data storage with no time limit
• SessionStorage-data storage for sessions. Once the window is closed, it will no longer exist.

The usage of the two methods is exactly the same. The following uses localStorage as an example.

Why use local storage?

In the early days, we used cookies, but cookies were not suitable for storing a large amount of data. That is to say, they were too small, only 4 k, and they were slow and inefficient.

LocalStorage Method

How can we add data? It is very simple, just like adding attributes to an object:

localStorage.pageLoadCount = 1;

You can check whether data is stored on the console of the browser:

It is also convenient to read and modify data:

Console. log (localStorage. pageLoadCount); // read localStorage. pageLoadCount = 10; // modify console. log (localStorage. pageLoadCount); // read

The result is as follows:

Of course, localStorage comes with some methods and attributes, as shown below:

LocalStorage. clear (); // clear all stored data localStorage. getItem ('pageloadcount'); // reads the stored data. The returned value is "10", which is equivalent to localStorage. pageLoadCountlocalStorage. key (0); // obtain the key of the stored data. The returned value is "pageLoadCount" localStorage. length; // obtain the length of the stored data localStorage. removeItem ('pageloadcount'); // deletes the specified storage data localStorage. setItem ('name', 'jack'); // Add a new storage data, equivalent to localStorage. name = 'jack ';

Note that:When reading stored data, the returned data is a string. No matter what is stored before, the last read data is a string. Therefore, type conversion is required during reading.

The demo of the localStorage application is attached:

<! Doctype html> 
References:
HTML 5 Web Storage
HTML5 LocalStorage Local Storage

How to Set Up html5 Local Storage
You can use JavaScript to access HTML5 Storage and use the localStorage object of the global window object. Before using it, we need to first check whether it is available:

Function supports_html5_storage (){
Try {
Return 'localstore' in window & window ['localstore']! = Null;
} Catch (e ){
Return false;
}
}

HTML5 Storage is based on key-value pairs. The data you want to store must have a name as the key, and then you can use this key to read the data. This key is a string; data can be any data type supported by JavaScript, including strings, Boolean values, integers, and floating-point numbers. However, we usually store data as strings. If you store and read non-string data, you have to use functions like parseInt () or parseFloat () to convert the number to the required JavaScript data type.

Var foo = localStorage. getItem ("bar ");
//...
LocalStorage. setItem ("bar", foo );
You can also write it as follows:

Var foo = localStorage ["bar"];
//...
LocalStorage ["bar"] = foo;

For local storage of html5 LocalStorage
The following are the storage methods of the five browsers localStorage:

In addition to BASE64 encryption (BASE64 can also be easily decrypted), other browsers use Plaintext to store data.
Therefore, we recommend that you do not use localStorage to store sensitive information, which may be encrypted.

For more information, see HTML5 local storage security analysis.
Blog.csdn.net /...