How H5's LocalStorage stores refresh values locally-H5 Tutorial-php.cn

This time I will show you how H5's LocalStorage stores refresh values locally. What are theprecautionsfor H5's LocalStorage to store refresh values locally? Here is a practical case, let's take a look.

The biggest difference between the two storage technologies of H5 islife cycle.

1. localStorage is local storage, and the storage period is not limited;

2. sessionStorage session storage, the data will be lost when the page is closed lost.

Usage:

localStorage.setItem("key", "value") //Storage

localStorage.getItem(key)//Get the value by key

localStorage.valueOf()//Get all values

localStorage.removeItem("key")//Delete a single value, Pay attention to the quotation marks

localStorage.clear()//Delete all data

localStorage.length//Get the number of data

localStorage.key(N)//Get the Nth The key value of each data

Note: localStorage and sessionStorage are the same as above, and the usage methods are the same

Commonly used summaries:

localStorage.key = 1;//Set storage, named key, value 1

localStorage.removeItem("key");//Remove storage key, remember to add quotes

The following is a practical example for testing:

to save the entered text content locally, so that after closing the browser and reopening it, the previously entered content is still there (common in DingTalk on mobile phones) Field entry for leave and other fields in the log).

First of all, create a text areaon the page. The following is jQuery:

if(!localStorage.getItem("text"))　　//window对象的话，前面的window省略了哦 localStorage.setItem("text","");　　//这里先判断一下，做空白存储，否则返回 NULL 显示出来体验不好，这里的if大括号省去了 localStorage.text = localStorage.getItem("text");　　//取值 $("textarea").html(localStorage.text);　　//显示 $("textarea").keyup(function(){　　//这里有很多，比如blur, change, keydown, 还有做个定时器也行，实用于多字段存储 localStorage.setItem("text",$(this).val());　　//重新存储 });

Copy after login

The above can implement a practical small function, reflecting the H5 local storage or Very useful. Of course, if there are many fields, there is a JSON method provided! See the following, downloaded from the Internet

Copy after login

Example: Counter, refresh the page, you can see the effect:

Copy after login

It should be noted that HTML5 local storage can only storestrings, any format will be automatically converted to a string when stored, so when reading, you need to perform type conversion yourself. This is why parseInt must be used in the previous code.

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!