[Localstorage and Sessionstorage in 0]-javascript

L Content Directory

Brief introduction

Use of storages

Storages VS Cookies

At last

L Introduction

The code in this article is recommended to be executed under Chrome/360chrome.

HTML5 adds Localstorage and Sessionstorage, both of which are objects of window and can be window.localstorage/ Window.sessionstorage access, which is used to save data, is only slightly different from the scope of the save.

The following storage represent Window.localstorage and window.sessionstorage.

L Use of storages

1) Similarities and differences

Stores data as key-value pairs, with the key and value of the data being of type string

Localstorage stored locally, data will not expire unless manually cleared

Sessionstorage accompanies the session, the data stored in Sessionstorage will disappear after the window is closed

2) Inheritance Relationship

Localstorage and Sessionstorage are examples of storage.

　　　　

Using Console.dir (localstorage) to list the data stored in Localstorage, we found a property called __proto__.

object that __proto__ Pointer to the constructor that generated the object. prototype property.

We also know by looking for localstorage.__proto__ that Localstorage is an example of storage.

　　　　actually JavaScript of the instanceof the operator is the way to determine whether an object is an instance of a class.

We can see the methods defined in storage:

Clear () Clears all stored data

GetItem (string key) gets the value corresponding to the key, and the value returned is of type String

Key (number| String index) Gets the key of the specified index data, if index cannot be converted to a number returns the return value of key (0) and returns NULL if no data is stored for index specified indexes, the error will be thrown if no parameter is passed

RemoveItem (String key) removes key-value pairs specified by key

SetItem (string key, String value) sets the key and value, and the argument is converted to a string

3) Business Scenario

Localstorage is suitable for data that is not often modified as a cache store, such as an organization tree, and cached data can be viewed through the Resources tab of Chrome's developer tools (we can see that you can also view Web SQL and cookies, etc. The world is so beautiful.

Sessionstorage stores temporary data that disappears as the window is closed

L storages VS Cookies

The difference between storages and cookies:

1) data stored in storages will not be submitted to the server as requested

2) The maximum cookie is 4KB, and storages current situation can be considered according to 5MB

3) For cookies We do not have a friendly read/write mode using native JavaScript, and for storages we can easily read and write using the storage defined method.

L finally

The first time to write such a blog, lack of experience. If there is a mistake, please correct it in time. Thank you very much.

[Localstorage and Sessionstorage in 0]-javascript