Application de stockage local HTML5 sessionStorage et localStorage-Tutoriel H5-php.cn

Application de stockage local HTML5 sessionStorage et localStorage

大家讲道理

Libérer： 2017-08-19 14:13:40

original

2749 Les gens l'ont consulté

Avant HTML5, les navigateurs utilisaient généralement des cookies pour stocker des données, mais les cookies avaient des restrictions de nom de domaine et de taille

Après que HTML5 soit devenu populaire, le stockage de données côté navigateur pouvait être réalisé via localStorage et sessionStorage , que sont-ils. les caractéristiques de ces deux-là ?

sessionStorage
SessionStorage appartient à une session temporaire La durée de validité du stockage des données est : la période allant de l'ouverture de la page à la fermeture de la page à laquelle elle appartient. le stockage temporaire de la fenêtre Lorsque la page est fermée, le stockage local disparaît

localStorage

Stockage permanent (les données peuvent être supprimées manuellement. )
Limite de stockage (5M)
L'achèvement du client ne demandera pas de traitement au serveur
Les données de sessionStorage ne peuvent pas être partagées entre les pages, mais localStorage peut être partagé entre les pages

Application de sessionStorage :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload = function(){
            var aInput = document.getElementsByTagName(&#39;input&#39;);
            aInput[0].onclick = function(){
                //sessionStorage: 临时存储, 只在当前页面有效,不能传递到其他页面,页面关闭之后消失
                window.sessionStorage.setItem("name", aInput[3].value );
            };
            aInput[1].onclick = function(){
                alert(window.sessionStorage.getItem("name" ));
            };
            aInput[2].onclick = function(){
                window.sessionStorage.removeItem("name" );
            };
        }
    </script>
</head>
<body>
<input type="button" value="设置" />
<input type="button" value="获取" />
<input type="button" value="删除" />
<br/>
<input type="text" />
</body>
</html>

Copier après la connexion

Application de localStorage

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload = function(){
            var aInput = document.getElementsByTagName(&#39;input&#39;);
            aInput[0].onclick = function(){
                //localStorage : 永久性存储
                window.localStorage.setItem("name", aInput[3].value);
                window.localStorage.setItem("name2", &#39;aaaaa&#39;);
            };
            aInput[1].onclick = function(){
                alert( window.localStorage.getItem( "name" ) );
                alert( window.localStorage.getItem( "name2" ) );
            };
            aInput[2].onclick = function(){
                window.localStorage.removeItem("name");
//                window.localStorage.clear();
            };
        }
    </script>
</head>
<body>
<input type="button" value="设置" />
<input type="button" value="获取" />
<input type="button" value="删除" />
<br/>
<input type="text" />
</body>
</html>

Copier après la connexion

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload = function () {
            var aInput = document.getElementsByTagName("input");
            var oT = document.querySelector("textarea");

            if (window.localStorage.getItem("userName")) {
                aInput[0].value = window.localStorage.getItem("userName");
            }

            for (var i = 0; i < aInput.length; i++) {
                if (window.localStorage.getItem(&#39;sex&#39;) == aInput[i].value) {
                    aInput[i].checked = true;
                }
            }

            if (window.localStorage.getItem("note")) {
                oT.value = window.localStorage.getItem("note");
            }

            window.onunload = function () {
                if (aInput[0].value) {
                    window.localStorage.setItem("userName", aInput[0].value);
                }

                for (var i = 0; i < aInput.length; i++) {
                    if (aInput[i].checked == true) {
                        window.localStorage.setItem(&#39;sex&#39;, aInput[i].value);
                    }
                }

                if (oT.value) {
                    window.localStorage.setItem(&#39;note&#39;, oT.value);
                }
            }
        }
    </script>
</head>
<body>
<p>
    用户名: <input type="text"/>
</p>

<p>
    性别: <br/>
    <input type="radio" name="sex" value="男"/>男
    <input type="radio" name="sex" value="女"/>女
</p>

<p>
    备注:
    <textarea cols="30" rows="10"></textarea>
</p>

</body>
</html>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!