Sessionstorage, Localstorage Introduction

Brief introduction

The general level of technology is limited, there is nothing wrong, I hope you correct.

Sessionstorage, Localstorage, cookies These three are used in the browser to store data, cookies used more cumbersome after the summary, mainly about the use of sessionstorage and localstorage. Both Sessionstorage and Localstorage are objects that are used to store data on the browser side, and they are only useful in browsers and are not sent to the server side.

Sessionstorage

The Sessionstorage survival cycle is the time between the start of a conversation and the end of the session, which is valid from the time we open a browser window to closing the browser window, whether the refresh begins to reopen the page or the current sessionstorage is valid. When we open a new window, we re-create a Sessionstorage object.

Sessionstorage when we open the browser is created, it can only be valid in the current domain name, re-enter a URL will re-create a new Sessionstorage object, but as long as we do not close the current window we re-enter the original URL, The original sessionstorage is still available.

For example:

We first open Baidu, enter sessionstorage.name = "Baidu" in the console, and then enter Google's URL in the address bar, We found that Google is not sessionstorage.name this attribute, we enter the URL of the Baidu URL, Sessionstorage.name still exists. Each time we open a URL, a Sessionstorage object is created, and the Sessionstorage object is only valid within the current domain name, and the Sessionstorage object dies when we close the browser.

Sessionstorage is an object so we can go through "." To create properties and use attributes such as:

Sessionstorage.name = "ZT"; sessionstorage.age = 23sessionstorage.name//zt

Sessionstorage also provides us with a few APIs to official the use of our, we used to be the following several:

Length:sessionStorage.length returns a few properties below the current Sessionstorage object.

SetItem:sessionStorage.setItem ("_key", "value") adds a property to Sessionstorage and assigns a value equal to Sessionstorage._key = value.

SetItem:sessionStorage.getItem ("_key") gets the value of the key property on the Sessionstorage object, equivalent to Sessionstorage._key.

RemoveItem:sessionStorage.removeItem ("_key") deletes a property on the Sessionstorage object, equivalent to Sessionstorage._key = null.

Clear:sessionStorage.clear () empties all the properties above the Sessionstorage.

Sessionstorage.getitem () cannot be substituted in some cases, for example, we set a key property by Sessionstorage.setitem ("Key", "IsKey"), And the Sessionstorage prototype has a key method, if we sessionstorage.key to access the key method, and through Sessionstorage.getitem ("key") can access to the key property, But be sure to avoid the name of the property we store and the method name on the prototype.

Sessionstorage can only be used to store strings:

var arr = [1,2,3];sessionstorage.data = arr;sessionstorage.data//1,2,3

We want to store an array, though we have it, but when we take it out, we find that it is beyond recognition, if we want to store the object on Sessionstorage, we first need to serialize the object to a string, and then deserialize it when it is used:

var arr = [1,2,3];sessionstorage.data = Json.stringify (arr); Json.parse (sessionstorage.data)//[1,2,3]

Often our use of sessionstorage is to record information about a form. For example, when filling out a complex form, the user may inadvertently refresh the page, so that the information is filled in white, usually we use Sessionstorage to store the information that the user fills in, when the user sends the form, we are emptying the information, This allows you to keep the information you just filled out even if the user refreshes the browser.

Localstorage

The use of Localstorage on the API is consistent with the sessionstorage. The difference is that localstorage does not die, as long as it is created and we do not manually destroy (or clear the browser history) will always exist in our browser. Each domain name will create a localstorage, and the current domain name can only access its own localstorage. Localstorage is always present in the local so we use more, recently in the project used once, is to save the user to a report sorting settings, so that each time the page load from the Localstorage read the user's configuration, sent to the server, The data is returned in this order. Blog Park in writing blog when the Automatic preservation is also the use of localstorage, flexible use of localstorage can bring great convenience to users.

Sessionstorage, Localstorage Introduction