How to use H5 web local storage

How to use the WEB local storage? This issue may be often seen in our daily study or work. I hope that you can give you a deep harvest through this issue. Below is the reference content brought by Xiaobian, let’s take a look!

Web Storage is a very important feature introduced by HTML5, which can store data locally in the client, similar to the cookie of HTML4, but can achieve more powerful than cookie, the cookie size is limited to 4KB, web, web Storage official is recommended for each website 5MB.

Web Storage is divided into two:



From the literal meaning, it can be clearly seen, and SessionStorage will save the data in In the session, the browser is closed; and localStorage has been saved in the client locally;

Whether it is sessionStorage, or LocalStorage, the available API is the same, commonly used as the following ( Take LocalStorage as an example):

Save Data: LocalStorage.SetItem (Key, Value); Read Data: LocalStorage.GetItem (Key); Delete a single data: LocalStorage.RemoveItem (key); Delete all data: LocalStorage.clear (); gets a index key: localStorage.key (Index);

Both KEY and VALUE must be a string, in other words, the Web Storage API can only operate strings.

Next, we develop a simple address bookmaster through Web Storage to demonstrate the use of related APIs; we must implement the following features:

Enter contacts, contacts 2 fields of mobile phone number, using mobile phone number as KeyLying into localStorage; finds the machine master according to the mobile phone; lists all the contact information currently saved;

First write a simple HTML code

   H5 local storage WebStorage     Name:     Mobile:    
Enter mobile phone number:

To achieve the storage of the contact, just simply implement the following JS method:

functionsave () {varmobilephone = document.getElementById ( "mobilephone") value;. varuser_name = document.getElementById ( "user_name") value;. localStorage.setItem (mobilephone, user_name);} // used to hold data
To implement the Lord of the Logger, the following JS method is implemented:

// Find data functionFind () {varsearch_phone = document.getlementByid (“Search_Phone “) .value; varnamE = localStorage.getItem (Search_phone); varFind_Result = document.getlementByid (“Find_Result”); Find_Result.innerHtml = Search_Phone + “The Over-the Oner is:” + Name;}

 Thank you Read! After reading the above, how do you know how to use the H5 web local storage? I hope that the content of the article will help everyone. If you want to know more about the content, please pay attention to Tumi Yun Industry Information Channel.                      
© Copyright Notice
Just support it if you like
Relevant recommendations
comment Grab the couch

Please log in to comment