HTML5 localStorage local storage, html5localstorage

HTML5 localStorage local storage, html5localstorage

This section describes how to use localStorage. Including adding, modifying, deleting, and triggering events to storage objects.

Directory

1. Introduction

1.1 description

Features 1.2

1.3 Support for the minimum browser version

1.4 applicable scenarios

2. Member

2.1 attributes

2.2 Method

2.3 events

3. Example

3.1 Data Storage

3.2 read data

3.3 store Json objects

1. Introduction 1.1

LocalStorage is a local storage that can be used to store the data of the entire website for a long time. The stored data has no expiration time until it is manually removed.

In JavaScript, this object can be called through window. localStorage or localStorage.

 

Features 1.2

1) Same-source policy restrictions. If you want to operate on the same localStorage between different pages, these pages must be under the same protocol, the same host name, and the same port. (IE8 and 9 store data only based on the same host name, ignoring the Protocol (HTTP and HTTPS) and port number requirements)

2) It is stored locally only. LocalStorage data will not be sent to the server along with the HTTP request, but will only take effect locally.

3) Save permanently. The saved data does not expire until it is manually removed.

4) storage method. LocalStorage uses key and value storage. The value must be of the string type (when a non-string is input, it is also converted to a string during storage. The value true is converted to "true ").

5) Storage ceiling: The storage ceiling varies with different browsers, but most browsers limit the storage ceilingLess than 5 MB.

The storage ceiling for accessible http://dev-test.nemikor.com/web-storage/support-test/ test browsers.

6) share with the browser. LocalStorage data can be shared between the same page on different tabs of the same browser.

 

1.3 Support for the minimum browser version

The minimum localStorage browser versions are supported: IE8 and Chrome 5.

 

1.4 applicable scenarios

LocalStorage is applicable to the following two scenarios:

1) temporary storage solutions with relatively large data volumes. Such as automatic saving when you edit an article online.

2) Multi-page access to common data. SessionStorage is only applicable to the same tab. Compared with localStorage, data can be shared among multiple tabs.

 

2. Member 2.1 attributes

Readonly int localStorage. length: returns an integer that indicates the number of data items (key-value pairs) stored in the localStorage object.

 

2.2 Method

String localStorage. key (int index): return the name of the index number of the current localStorage object. If no value is returned, null is returned.

String localStorage. getItem (string key): value corresponding to the Return key name (key ). If no value is returned, null is returned.

Void localStorage. setItem (string key, string value): This method accepts a key name (key) and a value as the parameter and adds the key-value pair to the storage. If the key name existsUpdateThe corresponding value.

Void localStorage. removeItem (string key): removes the specified key from the localStorage object.

Void localStorage. clear (): clears all items of the localStorage object.

 

2.3 events

Storage: this event is triggered when localStorage is changed.

In IE 11 and Chrome, this event has different triggering mechanisms:

1) Whether to trigger the current page: When the localStorage operation is performed on the current page, IE 11 also triggers this event on the current page, and Chrome does not trigger this event on the current page.

2) perform repeated operations on localStorage. For example, if duplicate data is stored, IE 11 triggers this event and Chrome does not.

 

3. Example 3.1 storing data 3.1.1 using setItem () method

LocalStorage. setItem ('testkey', 'This is a test value'); // save a value

3.1.2 attribute-based storage

LocalStorage ['testkey'] = 'This is a test value ';

　　

3.2 obtain data 3.2.1 value through getItem () method

LocalStorage. getItem ('testkey'); // => returns the value of testKey.

3.2.2 using attribute

LocalStorage ['testkey']; // => This is a test value.

 

3.3 store Json objects

LocalStorage can also store Json objects. during storage, the object is converted to the text format through JSON. stringify (). During reading, the text is converted back to the object through JSON. parse.

Var userEntity = {name: 'Tom ', age: 22}; // storage value: Convert the object to a Json string localStorage. setItem ('user', JSON. stringify (userEntity); // value: Convert the obtained Json string back to the object var userJsonStr = localStorage. getItem ('user'); userEntity = JSON. parse (userJsonStr); console. log (userEntity. name); // => tom

====================================== Series of articles ==============================================

This article: 6.7 HTML5 localStorage Local Storage

Web development path Series