フロントエンドページキャッシュlocalStorage

ブラウザでは、Web Storageを使用してキー値を格納すると、クッキーを格納する方法よりも直感的で、容量が大きくなります.localStorageとsessionStorageの2つが含まれています.
1、sessionStorage(一時記憶):各データソースに対して一つの記憶領域を維持し、ブラウザが開く間に存在し、ページの再ロードを含む
2、localStorage(長期保存):sessionStorageと同じであるが、ブラウザが閉じた後もデータはずっと存在する
 
localStorageオブジェクトは、HTML 5のクライアントが永続化データを格納するスキームである.同じlocalStorageオブジェクトにアクセスするには、同じドメイン名(サブドメイン名が無効)から同じプロトコルを使用して、同じポートにページを表示する必要があります.
localStorageは、Storageタイプのインスタンスです.以下の方法があります.
①clear():すべての値を削除します.
②getItem(name):指定した名前nameから対応する値を取得
③key(index):指定した数値位置でその位置の名前を取得します.
④removeItem(name):nameで指定した名前のペアを削除
⑤setItem(name,value):指定した名前に対応する値を設定します.
ただし、storageには文字列のデータしか格納できませんが、JSでよく使われる配列やオブジェクトには直接格納できません.

    name: 

    age:
    



<br>    $(function(){<br>        $("input[name='name']").val(localStorage.getItem("name"));<br>        $("input[name='age']").val(localStorage.getItem("age"));<br>    });<br>    function toBaidu() {<br>        localStorage.setItem("name",$("input[name='name']").val());<br>        localStorage.setItem("age",$("input[name='age']").val());<br>        window.location.href="http://localhost:8080/testLocalStorage";<br>    }<br>

 

ブラウザの表示方法

開発者ツール

にアクセス

選択Application

左側のStorageの下でLocal StorageとSession Storage

を表示

転載先:https://www.cnblogs.com/qingchun-com/p/8399609.html