HTML5 localStorage のナレッジポイントの概要

この記事では主に HTML5 の localStorage の知識ポイントの概要を共有します。HTML5 では、新しい localStorage 機能が追加されました。この機能は主にローカル ストレージとして使用され、Cookie の各項目の不足の問題を解決します。 Cookie のストレージ容量は 4K)、一般的なブラウザは localStorage で 5M サイズをサポートします。この localStorage はブラウザによって異なります。 1. localStorage と sessionStorage とは何ですか? HTML5 では、主にこの機能が追加されました。 Cookie ストレージ容量不足の問題を解決するためにローカルストレージとして使用されます (Cookie 内の各 Cookie のストレージ容量は 4K)。通常、ブラウザーは 5M の localStorage サイズをサポートしますが、この localStorage はブラウザーによって異なります。

2. localStorage の利点と制限

localStorage の利点

1. localStorage は、最初に要求されたデータをローカルに保存できます。 Cookie と比較して帯域幅を節約できますが、これはブラウザの上位バージョンでのみサポートされます。サイズは均一ではなく、localStorage 属性は次のとおりです。 2. 現在、すべてのブラウザーは、localStorage の値の型を文字列型に制限しています。一部の変換では、LocalStorage をプライバシー モードで読み取ることができません。ブラウザの4. LocalStorage は基本的に文字列を読み取ります。保存されたコンテンツが多い場合、メモリ領域を消費し、ページがスタックします 5. LocalStorage の唯一の違いは、クローラーによってクロールされないことです。 sessionStorage は localStorage が永続ストレージであるのに対し、sessionStorage は永続ストレージです。セッションが終了すると、sessionStorage のキーと値のペアはクリアされます

ここでは localStorage を使用します。分析しましょう

3。 localStorage

localStorage のブラウザ サポート:

ここでの特別なステートメントは、IE ブラウザを使用する場合、UserData がストレージとして使用されるということです。 ここで説明するのは localStorage のコンテンツであるため、userData はストレージとして使用されます。ブロガーの個人的な意見では、現在の IE6/IE7 は廃止の段階にあり、今日の多くのページの開発には Html5CSS3 などの新しいテクノロジが含まれるため、UserData の使用法を学ぶ必要はありません。したがって、一般に、上記を使用する場合は、それらと互換性がありません。まず、localStorage を使用する場合、ブラウザが localStorage 属性をサポートしているかどうかを判断する必要があります。ここでは、localStorage を記述する方法が 3 つあります。一つずつ紹介していきます

if(！window.localStorage){
            alert("浏览器支持localstorage");
            return false;
        }else{
            //主逻辑业务
        }

実行後の結果は以下の通りです

ここで注意すべき点は、localStorageの使用も同一生成元ポリシーに従うため、異なるWebサイトが同じlocalStorageを直接共有することはできません

コンソールに出力される最終結果は次のとおりです:

読者が今保存した型が int であることに気づいたかどうかはわかりませんが、出力される型は string です。これは、localStorage 自体が string のみをサポートする特性に関連しています。タイプのストレージ。

localStorageの読み取り

if(！window.localStorage){
            alert("浏览器支持localstorage");
            return false;
        }else{
            var storage=window.localStorage;
            //写入a字段
            storage["a"]=1;
            //写入b字段
            storage.a=1;
            //写入c字段
            storage.setItem("c",3);
            console.log(typeof storage["a"]);
            console.log(typeof storage["b"]);
            console.log(typeof storage["c"]);
        }

localStorageを読み取るには3つの方法がありますが、その中で公式に推奨されている2つの方法は、私にはわからないので聞かないでください。 localStorage はフロントエンド データベースに相当すると述べましたが、データベースには主に追加、削除、確認の 4 つのステップがあり、ここでの読み取りと書き込みは追加と確認の 2 つのステップに相当します

次に、 localStorage の削除と変更の 2 つのステップ

このステップを変更することは、グローバル変数の値を変更することと同じであるため、簡単に説明します

if(!window.localStorage){
            alert("浏览器支持localstorage");
        }else{
            var storage=window.localStorage;
            //写入a字段
            storage["a"]=1;
            //写入b字段
            storage.a=1;
            //写入c字段
            storage.setItem("c",3);
            console.log(typeof storage["a"]);
            console.log(typeof storage["b"]);
            console.log(typeof storage["c"]);
            //第一种方法读取
            var a=storage.a;
            console.log(a);
            //第二种方法读取
            var b=storage["b"];
            console.log(b);
            //第三种方法读取
            var c=storage.getItem("c");
            console.log(c);
        }

コンソール上で、 a キーが 4

localStorage の削除

1 に変更されていることがわかります。localStorage の内容をすべてクリアします

if(!window.localStorage){
            alert("浏览器支持localstorage");
        }else{
            var storage=window.localStorage;
            //写入a字段
            storage["a"]=1;
            //写入b字段
            storage.b=1;
            //写入c字段
            storage.setItem("c",3);
            console.log(storage.a);
            // console.log(typeof storage["a"]);
            // console.log(typeof storage["b"]);
            // console.log(typeof storage["c"]);
            /*分割线*/
            storage.a=4;
            console.log(storage.a);
        }

2. localStorage を削除します

var storage=window.localStorage;
            storage.a=1;
            storage.setItem("c",3);
            console.log(storage);
            storage.clear();
            console.log(storage);

コンソールで結果を表示します

localStorageのキーを取得します

var storage=window.localStorage;
            storage.a=1;
            storage.setItem("c",3);
            console.log(storage);
            storage.removeItem("a");
            console.log(storage.a);

key()メソッドを使用し、インデックスを入力および終了して、対応するキーを取得します

4. localStorageに関するその他のメモ

通常、JSON は localStorage に保存されますが、localStorage は自動的に localStorage を文字列形式に変換します

現時点では、JSON.stringify() メソッドを使用して JSON を JSON 文字列に変換できます

例:

if(!window.localStorage){
            alert("浏览器支持localstorage");
        }else{
            var storage=window.localStorage;
            var data={
                name:'xiecanyong',
                sex:'man',
                hobby:'program'
            };
            var d=JSON.stringify(data);
            storage.setItem("data",d);
            console.log(storage.data);
        }

读取之后要将JSON字符串转换成为JSON对象，使用JSON.parse()方法

var storage=window.localStorage;
            var data={
                name:'xiecanyong',
                sex:'man',
                hobby:'program'
            };
            var d=JSON.stringify(data);
            storage.setItem("data",d);
            //将JSON字符串转换成为JSON对象输出
            var json=storage.getItem("data");
            var jsonObj=JSON.parse(json);
            console.log(typeof jsonObj);

打印出来是Object对象

另外还有一点要注意的是，其他类型读取出来也要进行转换

相关推荐：

html5中LocalStorage本地存储的示例

HTML5本地存储应用sessionStorage和localStorage

localStorage与sessionStorage五种循序渐进的使用方法

以上がHTML5 localStorage のナレッジポイントの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。