HTML5 Advanced Tutorial - Web Storage

Preface

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

Both methods save data through key-value pairs, which are easy to access and do not affect website performance. Their usage is the same, but their storage times are different.
LocalStorage data is saved on local hardware and can be saved permanently. The api can be manually called to clear the data. sessionStorage is stored in the session object and will be cleared when the browser is closed.

The size of web Storage is limited on the browser. The size of different browsers will be different. In mainstream browsers, the size is about 5M, which is actually enough to store ordinary data.

Usage

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

setItem

Save data: localStorage.setItem(key,value);

Example:

localStorage.setItem('name','Hello World');

When the keys are the same, the previous value will be overwritten to modify the data. If value is an object, it needs to be converted to a json string, otherwise what you read will be [object Object]

getItem

Read data: localStorage.getItem(key);

Example:

localStorage.getItem('name');       // Hello World

removeItem

Remove Single data: localStorage.removeItem(key);

Example:

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

After deleting the data with key name, if the data cannot be obtained in loaclStorage, null will be returned;

clear

Delete all data: localStorage.clear ();

Example:

localStorage.clear();

All data in localStorage will be deleted at this time.

key

Get the key of a index: localStorage.key(index);
Example:

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

Get the index as 1 The key is name2.

Constructor

In actual projects, localStorage may need to be operated multiple times. We can operate it better through 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();
    }
}

// 使用new字符把构造函数实例化出多个对象
var local1 = new localEvent('name1');
var local2 = new localEvent('name2');

local1.set('Hello World');
local2.set('Hello Linxin');

local1.get();               // Hello World
local2.get();               // Hello Linxin

This is just a simple demonstration. If we usually store objects in our projects, we need to do some processing in the code.

Listen to storage Events

You can listen to the storage event of the window object and specify its Event processing function, when localStorage or sessionStorage is processed in the page When modified, the corresponding processing function will be triggered.

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 attributes:

• key: key value.

• oldValue: The value before modification.

• newValue: The modified value.

• url: Page url.

• storageArea: The modified storage object.

Note: In Google Chrome, the storage needs to be modified in different tabs to trigger this event, that is, web page A listens to this event, and localStorage is modified in web page B, then the web page A will trigger the event function. But in IE, modifying localStorage on the same web page will trigger this event.

Debugging

Google Chrome’s own debugging tools (chrome devtools) are very easy to use and can be used 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, etc. Select the domain name of the website we want to debug, and you can see the corresponding key on the right. and value, which can be edited or deleted by right-clicking.

Compatible

It is compatible with IE8 and above, but it is special and only supports it when it needs to be opened on the server. Directly double-clicking file:// to open the file is incompatible.

Only IE11 supports opening under file://. Other browsers have a high degree of support, including compatibility on mobile phones.

【Related recommendations】

1. Free h5 online video tutorial

2. HTML5 full version manual

3. php.cn original html5 video tutorial

The above is the detailed content of HTML5 Advanced Tutorial - Web Storage. For more information, please follow other related articles on the PHP Chinese website!