H5 localStorage の使用状況の概要

今回は、H5 での localStorage の使用方法についてまとめました。localStorage を使用する際の 注意事項 は何ですか?実際の事例を見てみましょう。

1. localStorage、sessionStorage

とは この機能は主にローカルストレージとして使用され、Cookieのストレージ容量不足の問題を解決します。通常、ブラウザは localStorage で 5M のサイズをサポートしますが、この localStorage はブラウザによって異なります。

2. localStorage の利点と制限

localStorage の利点

1. localStorage は、最初に要求されたデータをローカルに保存できます。 Cookie と比較して帯域幅を節約できますが、これはブラウザの上位バージョンでのみサポートされます。サイズは均一ではなく、IE バージョンのみです。 IE8 は localStorage 属性をサポートしています。現在、すべてのブラウザーは localStorage の値の型を文字列型に制限しています。この型は何らかの変換が必要です

3。ブラウザの

4. LocalStorage は基本的に

文字列

を読み取ります。保存されたコンテンツが大量にある場合、ページがスタックする原因になります 5. LocalStorage はクローラーによってクロールされません

localStorage と sessionStorage の違いは、localStorage が永続ストレージであるのに対し、sessionStorage は永続ストレージであるということです。セッションが終了すると、sessionStorage 内のキーと値のペアはクリアされます ここでは、localStorage を使用して分析します

3. localStorage の使用

localStorage のブラウザ サポート:

ここでの特別なステートメントは、

IE ブラウザ

を使用している場合、UserData が必要であるということです。ここでの主な説明は、localStorage のコンテンツであるため、userDataブロガーの個人的な意見では、現在の IE6/IE7 は廃止されており、今日のページ開発の多くには Html5CSS3 などの新しいテクノロジが含まれるため、UserData の使用方法を学ぶ必要はありません。一般に、これを使用する場合は互換性がありません

まず、localStorage を使用する場合、ブラウザが localStorage をサポートしているかどうかを確認する必要があります。属性

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

localStorage を記述する方法は 3 つあります。ここではその 1 つを紹介します。

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 の使用は同一生成元ポリシーにも従うため、異なる Web サイトが同じ localStorage を直接共有できないことに注意してください。コンソールは次のとおりです: 読者が今保存された型が int であることに気づいたかどうかはわかりませんが、出力される型は string です。これは、localStorage 自体の特性に関連しており、localStorage は文字列型のストレージのみをサポートします。

localStorageの読み取り

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);
        }

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

。 localStorage の削除と変更の 2 つのステップ

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

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);
        }

これは、コンソール上で行われます。 a キーが 4 に変更されていることがわかります

localStorage的删除

1、将localStorage的所有内容清除

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

2、 将localStorage中的某个键值对删除

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

控制台查看结果

localStorage的键获取

var storage=window.localStorage;
            storage.a=1;
            storage.setItem("c",3);
            for(var i=0;i<storage.length;i++){
                var key=storage.key(i);
                console.log(key);
            }

使用key()方法，向其中出入索引即可获取对应的键

四、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对象

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

H5的存储方式详解

postMessage实现跨域、跨窗口消息传递

以上がH5 localStorage の使用状況の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。