HTML5 ローカルストレージアプリケーション sessionStorage と localStorage-H5 チュートリアル-php.cn

HTML5 ローカルストレージアプリケーション sessionStorage と localStorage

大家讲道理

リリース： 2017-08-19 14:13:40

オリジナル

2749 人が閲覧しました

HTML5 が登場する前は、ブラウザーは一般に Cookie を使用してデータを保存していましたが、Cookie にはドメイン名とサイズの制限がありました。

HTML5 が普及した後は、localStorage と sessionStorage を介してブラウザー側でデータを保存できるようになりました。これら 2 つの利点は何ですか?機能についてはどうですか？

sessionStorage
SessionStorage は、ページが開かれてからページが閉じられるまでの一時的なセッションです。閉じるとローカルストレージが消滅します

localStorage

永続ストレージ（データは手動で削除可能）
ストレージ制限（5M）
クライアントによって完了され、サーバー処理を要求しません
sessionStorage データはページ間で共有できませんが、localStorage はページ間で共有できます

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>

ログイン後にコピー

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>

ログイン後にコピー

rree

以上がHTML5 ローカルストレージアプリケーション sessionStorage と localStorageの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。