Shulou(Shulou.com)06/03 Report--

This article mainly shows you "there are several ways to store web Storage in HTML5". The content is simple and clear. I hope it can help you solve your doubts. Let me lead you to study and learn this article "there are several ways to store web Storage in HTML5".

Preface

There are two web Storage storage methods for HTML5: localStorage and sessionStorage.

These two ways are through the key-value pair to save data, easy to access, does not affect the performance of the website. They have the same usage and different storage time.

The data of localStorage is saved on local hardware and can be saved permanently. You can manually call api to clear the data. The sessionStorage is saved in the session object and is cleared when the browser is closed.

The size of web Storage is limited on browsers, and different browsers vary in size. In mainstream browsers, the size is about 5m, which is enough to store ordinary data.

Usage

Take localStorage as an example, the use of sessionStorage is the same:

SetItem

Save data: localStorage.setItem (key,value)

Example:

LocalStorage.setItem ('name','Hello World')

The previous value is overwritten when the key is the same, which is used to modify the data. If value is an object, you need to convert it to a json string, otherwise you will read [object Object].

GetItem

Read data: localStorage.getItem (key)

Example:

LocalStorage.getItem ('name'); / / Hello WorldremoveItem

Delete individual data: localStorage.removeItem (key)

Example:

LocalStorage.removeItem ('name'); localStorage.getItem (' name'); / / null

If the data whose key is name is deleted and the data is no longer available in loaclStorage, null is returned.

Clear

Delete all data: localStorage.clear ()

Example:

LocalStorage.clear ()

All data in the localStorage will be deleted.

Key

Get the key:localStorage.key (index) of an index

Example:

LocalStorage.setItem ('name1','Hello World'); localStorage.setItem (' name2','Hello Linxin'); localStorage.key (1); / / name2

Get the key with index 1, that is, name2.

Constructor function

In a real project, you may need to operate on localStorage multiple times, and we can do better with a constructor.

Example:

Var localEvent = function (item) {this.get = function () {return localStorage.getItem (item);} this.set = function (val) {localStorage.setItem (item, val);} this.remove = function () {localStorage.removeItem (item);} this.clear = function () {localStorage.clear () }} / / use new characters to instantiate the constructor into multiple objects var local1 = new localEvent ('name1'); var local2 = new localEvent (' name2'); local1.set ('Hello World'); local2.set (' Hello Linxin'); local1.get (); / / Hello Worldlocal2.get (); / / Hello Linxin

This is just a simple demonstration, like when we usually want to store objects in a project, we need to do some processing in the code.

Listen for storage events

You can listen to the storage event of a window object and specify its event handler, which will be triggered when changes are made to localStorage or sessionStorage in the page.

Window.addEventListener ('storage',function (e) {console.log (' key='+e.key+',oldValue='+e.oldValue+',newValue='+e.newValue);})

The time object (e parameter value) that triggers the event has several properties:

Key: key value.

OldValue: the value before it was modified.

NewValue: the modified value.

Url: page url.

StorageArea: the storage object that was modified.

Note: in Google browser, you need to modify storage in different tabs to trigger this event, that is, page A listens for the event, and page B modifies localStorage, then page A will trigger the event function. However, in IE, this event is triggered by modifying localStorage on the same page.

Debug

Google browser comes with a debugging tool (chrome devtools) that is very easy to use to debug localStorage and sessionStorage. Open the browser and press F12 to bring up the debugging tool, you can see Application. Click to open and you can see Storage in the left column, including localStorage, sessionStorage, IndexedDB and so on. If you select the domain name of the website we want to debug, you can see the corresponding key and value on the right, which can be edited or deleted by right-click.

Compatible

IE8 or above is compatible, but it is special and needs to be opened on the server to support it. Double-clicking the file:// directly to open the file is not compatible.

Only when it comes to IE11 can it be opened under file://. Other browsers are highly supported, including compatibility on mobile phones.

The above is all the contents of the article "there are several ways to store web Storage in HTML5". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.