HTML5 web storage

HTML5 Web Storage

Using HTML5, the user's browsing data can be stored locally.

Earlier, local storage used cookies. But Web storage needs to be more secure and fast. These data will not be saved on the server, but these data will only be used when users request website data. It can also store large amounts of data without affecting the performance of the website.

Web Storage of HTML5 local storage

Web Storage is a very important feature introduced by HTML5 and is often used in front-end development. Data can be stored locally on the client, similar to HTML4 cookies, but the functions can be much more powerful than cookies. The cookie size is limited to 4KB, and Web Storage officially recommends 5MB for each website. Web Storage is divided into two types:

sessionStorage

localStorage

literally means It can be clearly seen that sessionStorage saves the data in the session and disappears when the browser is closed; while localStorage always saves the data locally on the client. Unless the data is actively deleted, the data will never expire; regardless of Whether it is sessionStorage or localStorage, the APIs that can be used are the same. The commonly used methods are as follows:

Save data: localStorage.setItem( key, value ); sessionStorage.setItem( key , value );

Read data: localStorage.getItem( key ); sessionStorage.getItem( key );

Delete single data: localStorage.removeItem( key ); sessionStorage.removeItem( key );

Delete all data: localStorage.clear( ); sessionStorage.clear( );

Get the key of an index: localStorage.key( index ); sessionStorage.key( index ) ;

Both have the attribute length indicating the number of keys, that is, the key length:

##var keyLength1 = localStorage.length; var keyLength2 = sessionStorage .length;

As above, both key and value must be strings. In other words, the web Storage API can only operate on strings.

Before using web storage, you should check whether the browser supports localStorage and sessionStorage:

if(typeof(Storage)! ==="undefined")

{ // Yes! Supports localStorage sessionStorage objects!

// Some code.....

} else {

// Sorry! Web storage is not supported.

}

Example:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>HTML5--本地存储</title>
<script>
function clickCounter()
{
if(typeof(Storage)!=="undefined")
{
if (localStorage.clickcount)
{
localStorage.clickcount=Number(localStorage.clickcount)+1;
}
else
{
localStorage.clickcount=1;
}
document.getElementById("result").innerHTML=" 你已经点击了按钮 " + localStorage.clickcount + " 次 ";
}
else
{
document.getElementById("result").innerHTML="对不起，您的浏览器不支持 web 存储。";
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">点我！</button></p>
<div id="result"></div>
<p>点击该按钮查看计数器的增加。</p>
<p>关闭浏览器选项卡(或窗口),重新打开此页面,计数器将继续计数(不是重置)。</p>
</body>
</html>

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>php.cn</title> <style type="text/css"> textarea { width: 300px; height: 300px; } .button { width: 100px; } </style> </head> <body> <script type="text/javascript"> //使用HTML5 Web存储的localStorage和sessionStorage方式进行Web页面数据本地存储。 //页面参考如下图，能将页面上的数据进行本地存储。并能读取存储的数据显示在页面上。 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保存mydata:" + mydata + "\n"; } function readSession() { var t1 = document.getElementById("t1"); var oStorage = window.sessionStorage; var mydata = "不存在"; if (oStorage.mydata) { mydata = oStorage.mydata; } t1.value += "sessionStorage读取mydata:" + mydata + "\n"; } function cleanSession() { var t1 = document.getElementById("t1"); var oStorage = window.sessionStorage; var mydata = "不存在"; if (oStorage.mydata) { mydata = oStorage.mydata; } oStorage.removeItem("mydata"); t1.value += "sessionStorage清除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保存mydata:" + mydata + "\n"; } function readStorage() { var t1 = document.getElementById("t1"); var oStorage = window.localStorage; var mydata = "不存在"; if (oStorage.mydata) { mydata = oStorage.mydata; } t1.value += "localStorage读取mydata:" + mydata + "\n"; } function cleanStorage() { var t1 = document.getElementById("t1"); var oStorage = window.localStorage; var mydata = "不存在"; if (oStorage.mydata) { mydata = oStorage.mydata; } oStorage.removeItem("mydata"); t1.value += "localStorage清除mydata:" + mydata + "\n"; } </script> <div> <textarea id="t1"></textarea> <br> <label>需要保存的数据: </label> <br> <input type="text" id="t2" /> <input type="button" class="button" onclick="saveSession()" name="b1" value="session保存" /> <input type="button" class="button" onclick="readSession()" value="session读取" /> <input type="button" class="button" onclick="cleanSession()" value="session清除" /> <input type="button" class="button" onclick="saveStorage()" value="local保存" /> <input type="button" class="button" onclick="readStorage()" value="local读取" /> <input type="button" class="button" onclick="cleanStorage()" value="local清除" /> </div> </body> </html>

submit Reset Code

Automatic operation

HTML5 web storage

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]