HTML5 localStorage 入門チュートリアル

読み取り専用の localStorage を使用すると、ドキュメントのリモート (元の) オブジェクト ストレージにアクセスでき、データはクロスブラウザー セッションとして保存されます。 localStorage は sessionStorage に似ていますが、localStorage に保存されているデータは無期限であるのに対し、sessionStorage に保存されているデータはページ セッションが終了すると、つまりページが閉じられるとクリアされるという点が異なります。

localStorage 内のキーと値のペアの数。

 localStorage.length // 0localStorage.setItem('name', 'mazey')localStorage.length // 1

localStorage のキーと値のペアを追加/更新します。

 localStorage.setItem('name', 'mazey')localStorage.setItem('age', '23')localStorage // ストレージ {年齢: 23、名前: mazey、長さ: 2}

以下と同等:

 localStorage.name = 'mazey'localStorage.age = '23'localStorage // ストレージ {年齢: 23、名前: mazey、長さ: 2}

localStorage 内の指定されたキーの値を取得します。

 localStorage.setItem('name', 'mazey')localStorage.setItem('age', '23')localStorage.getItem('name') // mazeylocalStorage.getItem('age') // 23localStorage.getItem('sex ') // null

以下と同等:

 localStorage.setItem('name', 'mazey')localStorage.setItem('age', '23')localStorage.name // mazeylocalStorage['age'] // 23localStorage.sex // 未定義

指定されたキーのキーと値のペアを localStorage から削除します。

 localStorage.setItem('name', 'mazey')localStorage.setItem('age', '23')localStorage // ストレージ {年齢: 23, 名前: mazey, 長さ: 2}localStorage.removeItem('age') / / unknownlocalStorage // {name: mazey, length: 1}localStorage.removeItem('age') // 未定義

localStorage 内のすべてのキーと値のペアをクリアします。

 localStorage.setItem('name', 'mazey')localStorage.setItem('age', '23')localStorage // ストレージ {年齢: 23, 名前: mazey, 長さ: 2}localStorage.clear()localStorage // ストレージ{長さ: 0}

localStorage は文字列のみを保存できるため、配列/オブジェクトなどの複雑な値は、まず JSON.stringify() を使用して文字列に変換し、次に JSON.parse() を使用して複雑な値に変換してから使用する必要があります。

 let arr = [1, 2, 3]localStorage.setItem('arr', arr)localStorage.getItem('arr') // 1,2,3// JSON.stringify()localStorage.setItem('arr', JSON.stringify(arr))localStorage.getItem('arr') // [1,2,3]JSON.parse(localStorage.getItem('arr')) // [1, 2, 3]

ウィンドウに localStorage のストレージを監視させます。ラベルの localStorage が変更されると、他のラベルもそれに応じて応答します。

test0.html - localStorage を変更します。

 <input type=text id=input /><button onclick=setNameForStorage()>設定</button><script type=text/javascript> function setNameForStorage () { localStorage.name = document.querySelector('#input')。値 }</script>

test1.html - localStorage の変更に応答します。

 <script type=text/javascript> window.addEventListener('storage', e => { console.log(e.key, e.newValue) // name 123 })</script>

1. localStorage は同じドメイン名でのみ使用でき、postMessage および iframe と併用してクロスドメイン通信を実現できます。
2. IE の以前のバージョンは localStorage をサポートしていません。
3. サーバー環境で使用する必要があり、file://などの異常な環境では使用できません。
4. モバイル localStorage (H5、IOS、Android) では予期しない問題が発生する可能性があります。

ローカルストレージの使用をやめてください

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。