Html5でのlocalStorageの使い方の詳しい説明-jsチュートリアル-php.cn

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

php中世界最好的语言

リリース： 2018-03-16 17:02:41

オリジナル

1849 人が閲覧しました

今回は、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 サイトの他の関連記事を参照してください。