Xiaoqiang の HTML5 モバイル開発ロード (19) - HTML5 Local Storage (ローカルストレージ)-H5 チュートリアル-php.cn

ホームページ

ウェブフロントエンド

H5 チュートリアル

Xiaoqiang の HTML5 モバイル開発ロード (19) - HTML5 Local Storage (ローカルストレージ)

黄舟

Jan 22, 2017 am 11:57 AM

1. ブラウザストレージの開発の歴史

Flash SharedObject、Google Gears、Cookie、DOM Storage、User Data、window.name、Silverlight、Open Database など、多くのローカルストレージソリューションがあります。

現在主流のローカルストレージソリューションを確認するには、インターネットから写真を借りてください:

Xiaoqiang の HTML5 モバイル開発ロード (19) - HTML5 Local Storage (ローカルストレージ)

Cookie: Web で広く使用されていますが、制限が非常に明白で、一部のサイトでは容量が小さすぎます。セキュリティ上の理由から、Cookie を無効にすることを検討してください。Cookie の内容は、ページのリクエストとともにサーバーに送信されます。

Flash SharedObject: Kissy のストアモジュールは、Flash SharedObject を呼び出すために使用されます。 Flash SharedObject の利点は、適度な容量があり、基本的に互換性の問題がないことです。欠点は、ページに特定の swf および js ファイルを導入する必要があるため、追加の負担がかかり、一部のマシンでは処理が面倒なことです。フラッシュ動作環境。

Google Gears: Google のオフラインソリューションは更新を停止しました。公式には HTML5 localStorage ソリューションの使用が推奨されています。

ユーザーデータ: Microsoft が IE 用にシステム内に特別に開いたストレージ領域であるため、Windows + IE の組み合わせのみをサポートします。実際のテストは 2000 (IE5.5)、XP (IE6、IE7)、 Vista（IE7）以下は正常に使用できます。 XP では、通常は C:Documents and Settings のユーザー名 UserData にありますが、場合によっては C:Documents and Settings のユーザー名 Application DataMicrosoftInternet ExplorerUserData にあります。 Vista では、C:Users usernameAppDataRoamingMicrosoftInternet ExplorerUserData にあります。単一ファイルのサイズ制限は 128 KB で、1 つのドメイン名に合計 1024 KB のファイルを保存でき、ファイル数に制限はありません。制限されたサイトでは、これら 2 つの値はそれぞれ 64KB と 640KB になるため、さまざまな状況を考慮すると、1 つのファイルが 64KB 未満になるように制御するのが最善です。

localStorage: 上記のローカルストレージソリューションと比較すると、localStorage には独自の利点があります。大容量、使いやすく、強力で、ネイティブサポートです。欠点は、互換性が低いことです (Chrome、safari、Firefox、IE 9、IE8 はすべて localStorage をサポートしており、主に IE8 より前のバージョンではサポートされておらず、安全性も低くなります (そのため、機密情報を保存するために localStorage を使用しないでください)。

HTML5 における localStorage のブラウザ互換性は次のとおりです:

Xiaoqiang の HTML5 モバイル開発ロード (19) - HTML5 Local Storage (ローカルストレージ)

2. HTML5 の localStorage 操作は

HTML5 では、ローカルストレージは、localStorage と sessionStorage を含むウィンドウの属性です。名前から、この 2 つの違いは明確に識別できるはずです。前者は常にローカルに存在しますが、後者はセッションに伴ってのみ存在し、ウィンドウを閉じると消えます。どちらの使い方も全く同じです。

以前は、これはすべて Cookie によって行われていました。ただし、Cookie はリクエストごとにサーバーに渡されるため、速度が遅く非効率的になるため、大量のデータを保存するのには適していません。

HTML5 では、サーバーリクエストごとにデータが渡されるわけではなく、データはリクエストされた場合にのみ使用されます。 Web サイトのパフォーマンスに影響を与えることなく、大量のデータを保存できます。

Web サイトごとにデータは異なる領域に保存され、Web サイトは独自のデータのみにアクセスできます。

HTML5 は JavaScript を使用してデータを保存し、データにアクセスします。

localStorage メソッドによって保存されるデータには時間制限がありません。データは翌日、翌日、または翌日以降も利用できます。 localStorage には、ローカルストレージを設定してアクセスするための 3 つの方法があります。

localStorage.t1="ドライミックスの大きなボウル";

localStorage["t2"]="HTML5";

localStorage.setItem("t3","http://blog.csdn.NET / dawanganban");

localStorage.t1;

localStorage["t2"];

localStorage.getItem("t3");

<!DOCTYPE HTML>  
<html>  
    <head>  
        <meta charset="urf-8"/>  
    </head>  
    <body>  
        <script type="text/javascript">  
            //判断浏览器是否支持本地存储  
              
            if(window.localStorage){  
                    localStorage.t1="大碗干拌";  
                    document.write(localStorage.t1);  
                  
                    localStorage[&#39;t2&#39;]="<br/>hello word"  
                    document.write(localStorage.t2);  
  
                    localStorage.setItem("t3", "<br/>http://blog.csdn.net/dawanganban");  
                    document.write(localStorage.t3);  
            }else{  
                    alert("你的浏览器不支持");  
            }  
              
  
        </script>  
    </body>  
</html>

ログイン後にコピー

上記の3行の割り当てコードをコメントアウトし、データは引き続きブラウザ上で表示できることがわかりました。

Xiaoqiang の HTML5 モバイル開発ロード (19) - HTML5 Local Storage (ローカルストレージ)

localStorage には、上記の代入と取得に加えて、次のような用途もあります。

localStorage.length //取得するキーの数

localStorage.key() //保存されているキーの内容を取得

<!DOCTYPE HTML>  
<html>  
    <head>  
        <meta charset="urf-8"/>  
    </head>  
    <body>  
        <script type="text/javascript">  
            //判断浏览器是否支持本地存储  
              
            if(window.localStorage){  
                    //先清除一下  
                    localStorage.clear();  
  
                    localStorage.t1="大碗干拌";  
                    document.write(localStorage.t1);  
                  
                    localStorage[&#39;t2&#39;]="<br/>hello word"  
                    document.write(localStorage.t2);  
  
                    localStorage.setItem("t3", "<br/>http://blog.csdn.net/dawanganban");  
                    document.write(localStorage.t3);  
                      
                    //清除t2  全部清除用clear  
                    localStorage.removeItem("t2");  
  
                    for(var i=0;i<localStorage.length;i++){  
                        document.write("<br/>" + localStorage.key(i) + "___"+localStorage.getItem(localStorage.key(i)));  
                    }  
  
                      
            }else{  
                    alert("你的浏览器不支持");  
            }  
        </script>  
    </body>  
</html>

ログイン後にコピー

以上がXiaoqiangのHTML5モバイル開発ロード(19) - HTML5 Local Storage(ローカルストレージ)の内容です、その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。