suchen

Heim >Web-Frontend >H5-Tutorial >Lokale HTML5-Speicheranwendung sessionStorage und localStorage

Lokale HTML5-Speicheranwendung sessionStorage und localStorage

大家讲道理
大家讲道理Original
2017-08-19 14:13:402825Durchsuche

Vor HTML5 verwendeten Browser im Allgemeinen Cookies zum Speichern von Daten, aber Cookies hatten Einschränkungen hinsichtlich des Domänennamens und der Größe.

Nachdem HTML5 populär wurde, konnte die browserseitige Datenspeicherung durch localStorage und sessionStorage erreicht werden die Eigenschaften dieser beiden?

sessionStorage
SessionStorage gehört zu einer temporären Sitzung. Die Gültigkeitsdauer der Datenspeicherung beträgt: der Zeitraum vom Öffnen der Seite bis zum Schließen der Seite temporäre Speicherung des Fensters verschwindet der lokale Speicher

localStorage

  • Permanentspeicher (Daten können manuell gelöscht werden)

  • Speicherlimit (5 MB)

  • Client-Abschluss, fordert keine Serververarbeitung an

  • Sitzungsspeicher Daten können nicht zwischen Seiten geteilt werden, aber localStorage kann zwischen Seiten geteilt werden

Anwendung von 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>


Anwendung von 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>
<!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>


Das obige ist der detaillierte Inhalt vonLokale HTML5-Speicheranwendung sessionStorage und localStorage. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Einführung in verschiedene Methoden zur Implementierung von HTML5 zur Anpassung an mobile EndgeräteNächster Artikel：Einführung in verschiedene Methoden zur Implementierung von HTML5 zur Anpassung an mobile Endgeräte

In Verbindung stehende Artikel

Mehr sehen