How to use Web Storage

This time I will show you how to use Web Storage storage, and what are the precautions for using Web Storage storage. The following is a practical case, let's take a look.

localStorage-------sessionStorage

Web Storage features:

1. Key- -Simple storage form of Value type

2. It can be read and written in the same form as other ordinary javascript objects

3. Large capacity-->5M (compared to cookie)--(cookie is only 4KB and will be brought along when sending a request, which affects the speed)

4. It can only be accessed when it comes from the same source.

The following uses localStorage as an example----》sessionStorage and localStorage are basically the same, but sessionStorage is based on sessions. Disappears when the window is closed. However, localStorage is data stored locally. Unless deleted through a program or manually, the data will not be lost.

Similar to ordinary JavaScript objects, you can use dot (.) operations and [ ] bracket operations to access properties.

For example: localStorage.setItem("foo","1") \ localStorage.foo="1" \ localStorage["foo"]="1"

Commonly used APIs: setItem(), getItem(), clear().

When the object is stored, when reading and writing, the object needs to be converted into JSONString for storage, and two functions JSON.stringify( are introduced) obj), JSON.parse(str)

For example: var obj={x:1,y:2} Storage: localStorage.obj=JSON.stringify(obj), read :var obj2=localStorage.parse(localStorage.obj).

Data enumeration: 1. Traversal through key method and length attribute 2. for in traversal

1: for (var i= 0;i

2: for (var key in localStorage){ if(localStorage.hasOwnProperty(key)){var value=localStorage[key]; console.log(key ":" value);} }

storage event

After a certain window changes the web Storage data, the storage event is triggered in all windows except the window where the data is changed.

window.addEventListener('storage',function(event){ console.log(event.key) }.false);

The following lists several commonly used attributes of event event objects.

key (updated key name), oldValue (value before update), newValue (value after update), url (url of the updated page)

Management of namespace----Since localStorage data will automatically disappear if it is incorrect, if too many attributes are added indiscriminately, subsequent management will become very difficult. We can manage it through namespaces.

	var serviceName="SERVICENAME",storage=null;
	//通过load事件读取数据至本地变量
	window.onload=function(){
		try{
			storage=JSON.parse(localStorage[serviceName] || '{}');
		}catch{
			storage={};
		}
	}
	//通过onbeforeunload时间将数据写入localStorage
	window.onbeforeunload=function(){
		localStorage[serviceName]=JSON.stringify(storage)
	}
1. Write the data of localStorage to the local variable storage, then the access speed will be faster than the access speed of localStroage. 

2. Different pages or modules are named with different serviceNames to avoid attribute name conflicts. 
3. Since a page only reads and writes localStorage once, so the storage event cannot be triggered on the page. So when necessary, we need to encapsulate methods to update localStorage data or synchronize data from other tabs. 
 I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website! 
Recommended reading:

How to use source css3 to implement the ring loading progress bar

How to access the object properties and methods of JS
The above is the detailed content of How to use Web Storage. For more information, please follow other related articles on the PHP Chinese website!