Browser Local Storage Overview

Introduction

cookie

A cookie is a data (usually encrypted) that some websites store on the user’s local terminal in order to identify the user’s identity and track the session.

webStorage

webStorage is one of the local storage solutions in HTML5, including sessionStorag and localStorage, the difference between the two differences in the life cycle.

websql and indexeddb

IndexedDB is a low-level API for the client to store large amounts of structured data. The API uses an index to achieve a high-performance search for the data. WebStorage is useful for storing less data, but it is not useful for storing a lot of structured data. IndexedDB provides a solution.

websql is the early storage standards, is no longer maintenance, steering indexeddb, but websql better compatibility. But indexeddb is the future, so the next main indexeddb

Four contrast

【Tip】 sessionStorage can only be shared under a tab, that is, if you open a page from the current tab page, sessionStorage data is empty. But if you restore the closed page, then chrome and firefox sessionStorage will be restored, but Safari will not.

webStorage and indexeddb compatibility

webStorage compatibility

Basic browsers are supported

indexeddb compatibility

Currently poor compatibility

webStorage API

LocalStorage and sessionStorage usage are the same, the following show examples of the use of sessionStorage.

// Save the data to sessionStorage

sessionStorage.setItem ('key', 'value');

// Get data from sessionStorage

var data = sessionStorage.getItem ('key');

// remove the saved data from sessionStorage

sessionStorage.removeItem ('key');

// remove all saved data from sessionStorage

sessionStorage.clear ();

// enumerate sessionStorage methods

for (var i = 0; i <sessionStorage.length; i ++) {

     var key = sessionStorage.key (i);

     var value = sessionStorage.getItem (key);

}

Of course, you can also use the object to set the way to the assignment.

sessionStorage [ 'colorSetting' ] = '# a4509b' ;

sessionStorage.setItem ( 'colorSetting' , '# a4509b' );

However, the official proposal only use webStorage API (getItem, removeItem, key, length), to avoid the use of object key storage some of the defects, please click here for details

storage event

There are storage events for webStorage. When the storage changes, the storage event is triggered.
The condition here is that the data has changed, and if the current storage area is empty, even if the call to clear () will not trigger the event. Or if you set a value that is the same as the existing value by settingItem(), the event will not fire.

storage attribute

The following describes the use of multi-tab page sessionStorage will use chestnuts.

The multi-tab page uses sessionStorage

In the recent use of vuejs write completely before and after the separation of the project, when doing login authentication, in the end how to store user authentication information.

Because the system security requirements are relatively high, requiring the user to close the tab when the session immediately expires, the use of cookies to save the sensitive token is not appropriate. If you use localstorage, the localstorage data is still there, and the requirements are not met.
Think only use sessionStorage.

But embarrassing is that the use of sessionStorage is no longer able to share more pages. Each time you open a new tab, it will jump to the login page, the user experience is not friendly.

In simple terms, if the new tab if there is no sessionStorage data, it will trigger a localstorage modify events, then in the existing label received this event, it will be the current page sessionStorage data stored in localstorage, but immediately Removed. But in the new tab will listen to the event, you can get to the sessionStorage data, which will ensure that the new tab page can also get sessionStorage, but also to ensure that localstorage does not exist token information.

 function () {

	if (! sessionStorage.length) {

		// If the current page does not have sessionStorage data, it triggers an event.

		localStorage.setItem ( 'getSessionStorage' , Date .now ());

	};

	window .addEventListener ( 'storage' , function ( event ) {

		//console.log('storage event ', event);

		if (event.key == 'getSessionStorage' ) {

			// already existing tab page After receiving the event, talk sessionStorage data to localstorage and remove it immediately.

			localStorage.setItem ( 'sessionStorage' , JSON .stringify (sessionStorage));

			localStorage.removeItem ( 'sessionStorage' );

		} else  if (event.key == 'sessionStorage' &&! sessionStorage.length) {

			// The new tab will listen to the event here, through the newValue this property is stored in the localstorage sessionStorage data

			var data = JSON .parse (event.newValue), value;

			console .log (data, "111" );

			for (key in data) {

				sessionStorage.setItem (key, data [key]);

			}

		}

	});

	

}) ();

IndexedDB

Usage is not as simple as sessionStorage, but the following two articles on the basic indexeddb usage are relatively clear. No extra finishing.