HTML5 web storage, a better local storage than cookie s.
What is HTML5 Web Storage?
HTML5 enables users to store browsing data locally.
Earlier, cookie s were used for local storage. But Web storage needs to be more secure and fast. These data will not be saved on the server, but they are only used for users to request website data. It can also store a large amount of data without affecting the performance of the website.
Data exists as key/value pairs, and the data of a web page is only allowed to be accessed.
The two objects that the client stores data are:
Local Storage - Used for long-term storage of the entire site's data, the data saved without expiration time, until manual removal.
Session Storage - Used to temporarily save data from the same window (or tab) and delete the data after closing the window or tab.
Before using web storage, check whether browsers support localStorage and session Storage:
if(typeof (Storage)!=="undefined"){
//Yes, it supports localStorage objects.
}else{
//sorry, does not support web storage
}localStorage objects store data without time constraints. After the next day, the second week or the next year, the data is still available.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="result">
</div>
<script>
if(typeof(Storage)!=="undefined"){
localStorage.sitename="Newbie Course";
document.getElementById("result").innerHTML="Website Name"+localStorage.sitename
}else{
document.getElementById("result").innerHTML="sorry,Your browser does not support it web storage"
}
</script>
</body>
</html>//Create a localStorage key/value pair using key="sitename" and value= "novice tutorial".
//Retrieve the value of the key as "sitename" and insert the data into the element with id="result".
//The above examples can also be written as follows
localStorage.sitename="Newbie Course";
document.getElementById("result").innerHTML=localStorage.sitename
//Remove "sitename" from the local Storage:
localStorage.removeItem("sitename")Whether it's a local Storage or a session Storage, the APIs you can use are the same. There are several commonly used APIs (for example, a local Storage): Save data: localStorage.setItem(key,value); Read data: localStorage.getItem(key); Delete individual data: localStorage.removeItem(key); Delete all data: localStorage.clear(); Get the key of an index: localStorage.key(index);
Converting string values to digital types
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Point me</button></p>
<div id="result"></div>
<p>Click on this button to see the increase of the counter</p>
<p>Close the browser tab or window, reopen the page, and the counter will continue to count (not reset)</p>
<script>
function clickCounter(){
if(typeof(Storage)!=="undefined"){
if(localStorage.clickcount){
// clickcount===key
// localStorage.clickcount === value
localStorage.clickcount = Number(localStorage.clickcount)+1;
}else{
localStorage.clickcount=1
}
document.getElementById("result").innerHTML="You have clicked the button."+localStorage.clickcount+'second';
}else{
document.getElementById("result").innerHTML="Sorry, your browser doesn't support it. web storage";
}
}
</script>
</body>
</html>The effect is as follows
After testing, the browser is closed and the data is saved.
Session Storage object
The session Storage method stores data for a session. When the user closes the browser window, the data is deleted.
How to create and access a session Storage:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
function clickCounter(){
if(typeof(Storage)!=="undefined"){
if(sessionStorage.clickcount){
sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
}else{
sessionStorage.clickcount=1;
}
document.getElementById("result").innerHTML="In this reply, you have clicked the button."+sessionStorage.clickcount+"second"
}else{
document.getElementById("result").innerHTML="Sorry, your browser does not support it. web storage"
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Point me!</button></p>
<div id="result"></div>
<p>Click on this button to see the increase of the counter</p>
<p>Close the browser tab or window, reopen the page, and the counter will reset</p>
</body>
</html>
It's true that you can't store data after testing.
Web Storage Develops a Simple Web Site Listing Program
The website list program achieves the following functions:
You can enter the name of the website, the address, and store the name of the website as the key in the local Storage.
Find the Web Site according to the Website Name
List all currently saved websites
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div style="border:2px dashed #ccc;width:320px;text-align:center;">
<label for="sitename">Website Name(key):</label>
<input type="text" id="sitename" name="sitename" class="text">
<br>
<label for="siteurl">Website(value)</label>
<input type="text" id="siteurl" name="siteurl">
<br>
<input type="button" onclick="save()" value="adding record">
<hr/>
<label for="search_phone">Enter the website name:</label>
<input type="text" id="search_site" name="search_site">
<input type="button" onclick="find()" value="Find Websites">
<p id="find_result"><br></p>
</div>
<br>
<div id="list"></div>
<script>
loadAll();//Load all data stored in the local Storage
// 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 siteurl = localStorage.getItem(search_site);
var find_result = document.getElementById("find_result");
find_result.innerHTML=search_site+'The website is'+siteurl;
}
//Extract all objects stored in the local Storage and present them to the interface
function loadAll(){
var list = document.getElementById("list");
if(localStorage.length>0){
var result = "<table border='1'>";
result += "<tr><td>key</td><td>value</td></tr>";
for(var i=0;i<localStorage.length;i++){
var sitename = localStorage.key(i);
var siteurl = localStorage.getItem(sitename);
result += "<tr><td>"+sitename+"</td><td>"+siteurl+"</td></tr>"
}
result += "</table>";
list.innerHTML = result;
}else{
list.innerHTML = "Data is empty"
}
}
</script>
</body>
</html>
The above is just a demonstration of simple localStorage storage and lookup. In more cases, the data we store will be more complex.
JSON.stringify stores object data, and JSON.stringify converts objects into strings
var site = new Object; var str = JOSN.stringify(site);//Converting objects to strings
Then we use the JSON.parse method to convert strings into JSON objects.
var site = JOSN.parse(str);
Relevant address: https://www.runoob.com/html/html5-webstorage.html
indexDB blog
Ruan Yifeng's Blog
Introduction to IndexedDB Browser Database
http://www.ruanyifeng.com/blog/2018/07/indexeddb.html
indexedDB front-end database (simple case used)
https://www.cnblogs.com/oukele/p/10727790.html