ホームページ >ウェブフロントエンド >H5 チュートリアル >localStorageとsessionStorageの使用方法

localStorageとsessionStorageの使用方法

php中世界最好的语言オリジナル: 2018-01-11 10:00:322707ブラウズ

今回はlocalStorageとsessionStorageの使い方を紹介します。 localStorage と sessionStorage を使用する場合の注意事項は何ですか? 以下は実際のケースです。見てみましょう。

1. localStorage と sessionStorage とは

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

2. localStorage の利点と制限

localStorage の利点

1. localStorage は、最初に要求されたデータをローカルに保存できます。これは、5M のサイズに相当します。フロントエンドページは Cookie と比較して帯域幅を節約できますが、これは上位バージョンのブラウザでのみサポートされます

localStorage の制限

1. ブラウザのサイズは均一ではなく、IE8 では上記の IE バージョンのみが localStorage 属性をサポートします。

2. 現在、すべてのブラウザーは localStorage の値の型を文字列型に制限しています

3. localStorage はブラウザーのプライバシーモードでは読み取れません。 LocalStorage は基本的に

string

を読み取ります。大量のコンテンツを保存すると、メモリ領域が消費され、ページがスタックする原因になります。 5. localStorage クローラーによってクロールできません

localStorage と sessionStorage の唯一の違いは、localStorage であることです。は永続ストレージであり、sessionStorage は永続ストレージです。セッションが終了すると、sessionStorage のキーと値のペアはクリアされます

ここでは、localStorage を使用して分析します

3. localStorage の使用

localStorage のブラウザサポート:

IE ブラウザ

を使用している場合、ここでの主な説明は localStorage コンテンツであるため、userData についてはあまり説明しません。個人的な意見ですが、現在の IE6/IE7 は廃止の段階にあり、今日の多くのページ開発には HTML5CSS3 などの新興技術が含まれているため、一般的には互換性がありませんので、UserData の使用方法を学ぶ必要はありません。それを使用する場合、まず、localStorage を使用する場合、ブラウザが localStorage 属性をサポートしているかどうかを判断する必要があります。これは、localStorage 自体の特性に関連しています。LocalStorage は文字列型のストレージのみをサポートします。

localStorage の読み取り

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

localStorage を読み取るには 3 つの方法があり、その中で公式に推奨されている 2 つの方法は、それにアクセスするための getItemsetItem です。これは私も知らないので、理由は聞かないでください

。 localStorage はフロントエンドデータベースに相当します。データベースは主に追加、削除、確認、変更の 4 つのステップで構成されます。ここでの読み取りと書き込みは追加と確認の 2 つのステップに相当します

次はそれをやってみましょう。 localStorage の削除と変更の 2 つのステップについて

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

localStorage的写入，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"]);
        }

。ケースメソッドをマスターしました。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。