Comment: localStorage (local storage), can store data for a long time, without time limit, one day, one year, two years or even longer, data can be used, sessionStorage (session storage), only before the browser is closed, it can be used when creating another page, and the data will disappear after closing the browser.
Use localStorage and sessionStorage methods of HTML5 Web storage to store web page data localStorage.
The page is referenced as shown in the figure below, and the data on the page can be stored locally. And can read stored data and display it on the page.
localStorage (local storage), can store data for a long time, without time limit, one day, one year, two years or even longer, data can be used.
sessionStorage, which can only be used before the browser is closed, can be used when creating another page, and the data will disappear after closing the browser.
A blogger's test localStorage compatibility situation is as follows:
Chrome4+ starts supporting localStorage
Firefox3.5+ starts to support localStorage
Firefox1.5+ supports globalStorage
IE8+ supports localStorage
IE7 compatibility mode supports localStorage
IE5.5+ supports userdata
Safari 4+ supports localStorage
Opera10.5+ supports localStorage
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
textarea {
width: 300px;
height: 300px;
}
.button {
width: 100px;
}
</style>
</head>
<body>
<script type="text/javascript">
//Use localStorage and sessionStorage methods of HTML5 Web storage for local storage of web page data.
//Refer to the following figure to store the data on the page locally. And can read stored data and display it on the page.
function saveSession() {
var t1 = document.getElementById("t1");
var t2 = document.getElementById("t2");
var mydata = t2.value;
var oStorage = window.sessionStorage;
oStorage.mydata = mydata;
t1.value += "sessionStorage save mydata:" + mydata + "/n";
}
function readSession() {
var t1 = document.getElementById("t1");
var oStorage = window.sessionStorage;
var mydata = "not exist";
if (oStorage.mydata) {
mydata = oStorage.mydata;
}
t1.value += "sessionStorage reads mydata:" + mydata + "/n";
}
function cleanSession() {
var t1 = document.getElementById("t1");
var oStorage = window.sessionStorage;
var mydata = "not exist";
if (oStorage.mydata) {
mydata = oStorage.mydata;
}
oStorage.removeItem("mydata");
t1.value += "sessionStorageClear mydata:" + mydata + "/n";
}
function saveStorage() {
var t1 = document.getElementById("t1");
var t2 = document.getElementById("t2");
var mydata = t2.value;
var oStorage = window.localStorage;
oStorage.mydata = mydata;
t1.value += "localStorage save mydata:" + mydata + "/n";
}
function readStorage() {
var t1 = document.getElementById("t1");
var oStorage = window.localStorage;
var mydata = "not exist";
if (oStorage.mydata) {
mydata = oStorage.mydata;
}
t1.value += "localStorage reads mydata:" + mydata + "/n";
}
function cleanStorage() {
var t1 = document.getElementById("t1");
var oStorage = window.localStorage;
var mydata = "not exist";
if (oStorage.mydata) {
mydata = oStorage.mydata;
}
oStorage.removeItem("mydata");
t1.value += "localStorageClear mydata:" + mydata + "/n";
}
</script>
<div>
<textarea></textarea>
<label>Data to be saved: </label>
<input type="text" />
<input type="button" value="sessionSave" />
<input type="button" value="session read" />
<input type="button" value="session clear" />
<input type="button" value="local save" />
<input type="button" value="local read" />
<input type="button" value="localClear" />
</div>
</body>
</html>