HTML5 Localstorage Local Storage

Describes how Localstorage (local storage) is used. This includes operations such as adding, modifying, deleting, and triggering events on the storage object.

Directory

1. Introduction

1.1 Description

1.2 Features

1.3 Browser Minimum version support

1.4 Fit Scene

2. Members

2.1 Properties

2.2 Methods

2.3 Events

3. Example

3.1 Storing data

3.2 reading data

3.3 Storing JSON objects

1. Introduction 1.1 Description

Localstorage is local storage, which can be used for long-term preservation of the entire site's data, and the saved data has no expiration time until manually removed.

This object can be called through window.localstorage or localstorage in the JavaScript language.

1.2 Features

1) Same-origin policy restrictions. To operate on the same localstorage between different pages, these pages must be under the same protocol, the same hostname, and the same port. (IE8 and 9 store data based only on the same hostname, ignoring protocol (HTTP and HTTPS) and port number requirements)

2) stored locally only. Localstorage data is not sent to the server along with the HTTP request and will only take effect locally.

3) Permanent preservation. The saved data has no expiration time until it is manually removed.

4) storage mode. Localstorage is stored in the form of key, value. Value must be a string type (passing in a non-string and also converted to a string when stored). The true value is converted to "true").

5) Storage cap limit: Different browser storage limit is not the same, but most browsers limit the limit to 5MB below .

Access to the storage limit of the http://dev-test.nemikor.com/web-storage/support-test/test browser.

6) Share with browser. Localstorage data can be shared between pages in the same browser on different tabs.

1.3 Browser Minimum version support

Minimum version supported for Localstorage browser: IE8, Chrome 5.

1.4 Applicable Scenarios

Localstorage 2 places for comparison:

1) The data is relatively large temporary preservation scheme. Automatically save when editing an article online.

2) Multi-page access to common data. Sessionstorage only works on the same tab, Localstorage can share data across multiple tabs.

2. Member 2.1 Properties

readonly int localstorage. length : Returns an integer that represents the number of data items (key-value pairs) stored in the Localstorage object.

2.2 Methods

String Localstorage. Key (int index): Returns the key name of the index ordinal of the current Localstorage object. If NULL is not returned.

String Localstorage. GetItem (String key): Returns the value that corresponds to the key name (key). If NULL is not returned.

void Localstorage. SetItem (string key, String value): The method takes a key name (key) and a value as a parameter, adds a key-value pair to the store, and updates its corresponding value if the key name exists.

void Localstorage. RemoveItem (String key): Removes the specified key name (key) from the Localstorage object.

void Localstorage. Clear (): Clears all items of the Localstorage object.

2.3 Events

Storage : This event is triggered when changes are made to localstorage.

There are different triggering mechanisms for this event in IE 11 and chrome:

1) Whether the current page is triggered: when the current page is localstorage operation, IE 11 is the current page also triggers this event, Chrome is the current page does not trigger this event.

2) Repeat for localstorage: If you deposit duplicate data, IE 11 is triggering this event, Chrome is not triggering this event.

3. Example 3.1 Storage Data 3.1.1 is stored using the SetItem () method

Localstorage.setitem (' TestKey ', ' This is a test value '); Deposit a value

3.1.2 Storage by attribute mode

localstorage[' testKey ' = ' This is a test of value ';

　　

3.2 Getting data 3.2.1 Using the GetItem () method to take a value

Localstorage.getitem (' TestKey '); = = Returns the value corresponding to the TestKey

3.2.2 Value by attribute method

localstorage[' TestKey ']; = = This is the value of a test

3.3 Storing JSON objects

Localstorage can also store JSON objects: When stored, the object is converted to text format by Json.stringify (), and when read, the text is converted back to the object by Json.parse ().

var userentity = {    name: ' Tom ',    age:22};//store Value: Converts the object to a JSON string Localstorage.setitem (' user ', json.stringify ( userentity));//value: Converts the retrieved JSON string back to the object var userjsonstr = localstorage. GetItem (' user '); userentity = Json.parse ( USERJSONSTR); Console.log (Userentity.name); Tom

================================== Series article ==========================================

This article: 6.7 HTML5 localstorage Local Storage

Web Development Road Series articles

HTML5 Localstorage Local storage