国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

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

8.jpg

# #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中文網(wǎng)(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中文網(wǎng)(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>單擊該按鈕查看計數(shù)器增加。</p>
<p>關(guān)閉瀏覽器選項卡(或窗口),再試一次,計數(shù)器將繼續(xù)計數(shù)(不是重置)。</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中文網(wǎng)(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>單擊該按鈕查看計數(shù)器增加。</p>
<p>關(guān)閉瀏覽器選項卡(或窗口),再試一次,計數(shù)器復(fù)位</p>
</body>
</html>

Run the program to try it



Continuing Learning
||
<!DOCTYPE html> <html> <head>  <meta charset="UTF-8"> <title>php中文網(wǎng)(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>單擊該按鈕查看計數(shù)器增加。</p> <p>關(guān)閉瀏覽器選項卡(或窗口),再試一次,計數(shù)器將繼續(xù)計數(shù)(不是重置)。</p> </body> </html>
submitReset Code