HTML5 web storage

What is HTML5 Web storage?

Using HTML5 to store user browsing data locally is a better local storage method than cookies.

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.

Data exists in key/value pairs, and the data of the web page is only allowed to be accessed and used by the web page.

Browser support

# #Internet Explorer 8+, Firefox, Opera, Chrome, and Safari support web storage.

Note: Internet Explorer 7 and earlier IE versions do not support web storage.

localStorage and sessionStorage

There are two new objects to store data on the client side:

localStorage - Data storage without time limit
sessionStorage - Data storage for a session

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

if(typeof(Storage)!=="undefined")
{
// sessionStorage localStorage is supported!
// Related code...
}
else
{
// Sorry, Web storage is not supported
}

##localStorage object

There is no time limit on the data stored by localStorage objects. The data is still available after the next day, week or year.

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</title> 
</head>
<body>
<div id="result"></div>
<script>
    if(typeof(Storage)!=="undefined")
    {
        localStorage.lastname="刘奇";
        document.getElementById("result").innerHTML="姓名: " + localStorage.lastname;
    }
    else
    {
        document.getElementById("result").innerHTML="对不起,您的浏览器不支持web存储……";
    }
</script>
</body>
</html>

Run the program and try it

Example analysis:

Use key="lastname" and value="Smith" to create a localStorage key/value For

Retrieve the value with the key value "lastname" and then insert the data into the element with id="result"

Tip: Key/value pairs are usually strings Storage, 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:

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</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 + " time(s).";
            }
            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>

Run the program and try it

sessionStorage object

The sessionStorage method stores data for a session. The data is deleted when the user closes the browser window.

How to create and access a sessionStorage::

<!DOCTYPE html>
<html>
<head> 
    <meta charset="UTF-8">
    <title>php中文网(php.cn)</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="点击按钮 " + sessionStorage.clickcount + " time(s) ";
            }
            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>

Run the program to try it

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>php中文网(php.cn)</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 + " time(s)."; } 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>

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]