Html5でのlocalStorageの使い方の詳しい説明

今回は、Html5 での localStorage の使用について詳しく説明します。Html5 で localStorage を使用する際の注意点は何ですか? 以下は実際のケースです。 localStorage は Html5 の新しく追加された機能です。この機能は主にブラウザーのローカル ストレージに使用されます

1. ブラウザーが localStorage をサポートしているかどうかを確認します。

  if (!window.localStorage) {        console.log("浏览器不支持localStorage")
    } else {        console.log("浏览器支持localStorage")
    }

上記のコードの例: age の入力は数値ですが、出力は文字列です。localStorage は文字列型のデータのみを保存できることがわかります。

3. localStorage の

削除

:

1. localStorage 内のすべてのコンテンツを削除します: Storage.clear() はパラメーターを受け入れず、ドメイン名に対応するストレージ

オブジェクト

全体を単にクリアします。

  var DemoStorage = window.localStorage;    //写入方法1：
    DemoStorage.name = "Tom";    //写入方法2：
    DemoStorage["age"] = 18;    //写入方法3：
    DemoStorage.setItem("hobby", "sport");    
    console.log(DemoStorage.name,typeof DemoStorage.name);    console.log(DemoStorage.age, typeof DemoStorage.age);    console.log(DemoStorage.hobby, typeof DemoStorage.hobby);    /*输出结果:
    Tom string
    18 string
    sport string*/

2. キーと値のペアを削除します: Storage.removeItem() は、削除するデータ項目のキーをパラメータとして受け取り、ドメイン名に対応するストレージ オブジェクトから対応するデータ項目を移動します。取り除く。

 var DemoStorage = window.localStorage;    
    DemoStorage.name = "Tom";
    DemoStorage.age = 18;
    DemoStorage.hobby = "sport";    
    console.log(DemoStorage);    //输出：Storage {age: "18", hobby: "sport", name: "Tom", length: 3}
    DemoStorage.clear();    console.log(DemoStorage);    //输出: Storage {length: 0}

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

要素のJavaScriptコードを1つずつ非表示にする

JavaScriptのコールバック関数の詳細な説明

以上がHtml5でのlocalStorageの使い方の詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。