HTML5 Web Storage
HTML5 web storage, a better local storage method than cookies.
What is HTML5 web storage?
Use HTML5 to store the user's browsing data locally.
Earlier, local storage used cookies. But web storage needs to be more secure and fast. These data will not be stored on the server, but these data are only used for user request website data. It can also store a large amount of data without affecting the performance of the website.
Data exists as a key/value pair, and the data of a web page is only allowed to be accessed and used.
Browser supports
Internet Explorer 8+, Firefox, Opera, Chrome, and Safari support web storage.
Note: Internet Explorer 7 and earlier versions of IE do not support web storage.
localStorage and sessionStorage
The two objects that the client stores data are:
localStorage-It is used to save the data of the entire website for a long time. The saved data has no expiration time until it is manually removed.
sessionStorage-Used to temporarily save the data of the same window (or tab), which will be deleted after closing the window or tab.
Before using web storage, you should check whether your browser supports localStorage and sessionStorage:
if(typeof(Storage)!=="undefined") { // Yes! Support localStorage sessionStorage object! // Some code..... } else { // Sorry! Web storage is not supported. }
localStorage Object
There is no time limit for the data stored in the localStorage object. The data will still be available after the next day, the second week, or the next year.
Example
localStorage.sitename="Tutorial Fish"; document.getElementById("result").innerHTML="Site name:" + localStorage.sitename;
Example analysis:
Use key="sitename" and value="Tutorial Fish" to create a localStorage key/value pair.
Retrieve the value with the key value "sitename" and insert the data into the element with id="result".
The above example can also be written like this:
// store localStorage.sitename = "Tutorial Fish"; // find document.getElementById("result").innerHTML = localStorage.sitename;
Remove "sitename" in localStorage:
localStorage.removeItem("sitename");
Regardless of whether it is localStorage or sessionStorage, the available APIs are the same. The commonly used APIs are as follows (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();
Get the key of an index: localStorage.key(index);
Tip: Key/value pairs are usually stored as strings. You can convert the format according to your needs.
The following example shows the number of times the user clicked the button.
The string value in the code is converted to a numeric type:
Example
if (localStorage.clickcount) { localStorage.clickcount=Number(localStorage.clickcount)+1; } else { localStorage.clickcount=1; } document.getElementById("result").innerHTML="You have clicked the button "+ localStorage.clickcount +" times ";
sessionStorage Object
The sessionStorage method stores data for a session. When the user closes the browser window, the data will be deleted.
How to create and access a sessionStorage:
Example
if (sessionStorage.clickcount) { sessionStorage.clickcount=Number(sessionStorage.clickcount)+1; } else { sessionStorage.clickcount=1; } document.getElementById("result").innerHTML="You have clicked the button in this session "+ sessionStorage.clickcount +" times ";
Web Storage Develops A Simple Website Listing Program
The website list program implements the following functions:
You can enter the website name and URL, and store it in localStorage with the website name as the key;
Find the URL based on the website name;
List all currently saved websites;
The following code is used to save and find data:
save() and find() methods
// save data function save(){ var siteurl = document.getElementById("siteurl").value; var sitename = document.getElementById("sitename").value; localStorage.setItem(sitename, siteurl); alert("Added successfully"); } // find data function find(){ var search_site = document.getElementById("search_site").value; var sitename = localStorage.getItem(search_site); var find_result = document.getElementById("find_result"); find_result.innerHTML = search_site + "The URL is:" + sitename; }
The complete example demonstration is as follows:
Example
<div style="border: 2px dashed #ccc;width:320px;text-align:center;"> <label for="sitename">Site Name (key):</label> <input type="text" id="sitename" name="sitename" class="text"/> <br/> <label for="siteurl">Web address (value):</label> <input type="text" id="siteurl" name="siteurl"/> <br/> <input type="button" onclick="save()" value="New record"/> <hr/> <label for="search_site">Enter the site name:</label> <input type="text" id="search_site" name="search_site"/> <input type="button" onclick="find()" value="find website"/> <p id="find_result"><br/></p> </div>
Screenshot of the effect:
The above examples only demonstrate simple localStorage storage and search. In more cases, the data we store will be more complicated.
Next we will use JSON.stringify to store object data, JSON.stringify can convert objects into strings.
var site = new Object; ... var str = JSON.stringify(site); // convert the object to a string
Then we use the JSON.parse method to convert the string into a JSON object:
var site = JSON.parse(str);
JavaScript implementation code:
save() and find() methods
//save data function save(){ var site = new Object; site.keyname = document.getElementById("keyname").value; site.sitename = document.getElementById("sitename").value; site.siteurl = document.getElementById("siteurl").value; var str = JSON.stringify(site); // convert the object to a string localStorage.setItem(site.keyname,str); alert("Save successfully"); } //Find data function find(){ var search_site = document.getElementById("search_site").value; var str = localStorage.getItem(search_site); var find_result = document.getElementById("find_result"); var site = JSON.parse(str); find_result.innerHTML = search_site + "The site name is: "+ site.sitename + ", the URL is:" + site.siteurl; }
The complete example is as follows:
Example
<div style="border: 2px dashed #ccc;width:320px;text-align:center;"> <label for="keyname">Alias (key):</label> <input type="text" id="keyname" name="keyname" class="text"/> <br/> <label for="sitename">Site name:</label> <input type="text" id="sitename" name="sitename" class="text"/> <br/> <label for="siteurl">Website:</label> <input type="text" id="siteurl" name="siteurl"/> <br/> <input type="button" onclick="save()" value="New record"/> <hr/> <label for="search_site">Enter the alias (key):</label> <input type="text" id="search_site" name="search_site"/> <input type="button" onclick="find()" value="find website"/> <p id="find_result"><br/></p> </div>
The loadAll in the example outputs all the stored data. You need to ensure that the data stored in localStorage is in JSON format, otherwise JSON.parse(str) will report an error.
Demonstration of output results: