html5 での LocalStorage ローカル ストレージの例

1. ローカルストレージ

HTML5が誕生する前は、Webサイトがブラウザ側にデータを保存したい場合はCookieしか使用できず、Cookieの使用には多くの制限がありました。

Cookieの問題:

1. Cookieのサイズは約4Kに制限されています(ブラウザごとにばらつきがあります)

2. CookieはすべてのHTTPリクエストと一緒に送信されます(結果として多くの不要なCookieが一緒に送信されます)

ローカルストレージ:

1. localStorage のサイズは 5M に制限されています (ブラウザによってばらつきがあります)

2. LocalStorage は HTTP リクエストと一緒に送信されません

2. セッションレベルのローカルストレージ - sessionStorage

sessionStorage: ユーザーが Web サイトを閲覧するとき、Web サイトに入ってから Web サイトを閉じるまで、これがセッション オブジェクトの有効期間です。

sessionStorage は、ローカルストレージ上で関連する操作を実行するための 4 つのメソッドを提供します。

1. setItem(key, value)；ローカルストレージデータを追加

2.getItem( key )； keyで対応する値を取得

3.removeItem( key )； keyで削除 対応する値

4.clear(); すべてのローカルセッションデータをクリア（このドメイン名に限定）

 1 <script type="text/javascript"> 
 2     //添加key-value 数据到 sessionStorage 
 3     sessionStorage.setItem("name", "怜白"); 
 4     sessionStorage.setItem("job", "前端"); 
 5  
 6     //通过key来获取value 
 7     var name = sessionStorage.getItem("name"); 
 8  
 9     console.log(name); // 怜白
 10     console.log(sessionStorage.length); // 2
 11 
 12     // 通过key删除value
 13     sessionStorage.removeItem("job");
 14 
 15     console.log(sessionStorage.length); // 1
 16 
 17     //清空所有的key-value数据。
 18     sessionStorage.clear();
 19 
 20     console.log(sessionStorage.length); // 0
 21 </script>

3. 永続的なローカルストレージ - localStorage

localStorage: 永続化用のローカルストレージ。データはアクティブに削除されるため、データが期限切れになることはありません。

localStorage は、ローカル ストレージ上で関連する操作を実行するための 4 つのメソッドを提供します。

1. setItem(key, value)；ローカルストレージデータを追加

2.getItem( key )； keyで対応する値を取得

3.removeItem( key )； で対応する値を削除key

の値 4. clear() ; ローカルデータをすべてクリアします

<script type="text/javascript">
    //添加key-value 数据到 sessionStorage
    localStorage.setItem("name", "怜白");
    localStorage.setItem("job", "前端");

    //通过key来获取value
    var name = localStorage.getItem("name");

    console.log(name); // 怜白
    console.log(localStorage.length); // 2

    // 通过key删除value
    localStorage.removeItem("job");

    console.log(localStorage.length); // 1

    //清空所有的key-value数据。
    localStorage.clear();

    console.log(localStorage.length); // 0
</script>

4. まとめ

localStorage と sessionStorage の違いは、一方が一時的なストレージであり、もう一方が長期ストレージであることです。

以下のような記述方法を見たことがあるかもしれません:

<script type="text/javascript">
    // 设置name
    localStorage.name = "怜白"

    // 删除name
    delete localStorage.name
</script>

上記の直接代入方法は確かに機能を実現できますが、公式ドキュメントでは安全でない記述方法として定義されているため、この記述方法は使用せず、localStorage が提供するメソッドを使用してください。

以上がhtml5 での LocalStorage ローカル ストレージの例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。