localStorage を使用してクライアント側でデータを永続化する

ローカルストレージとは?

それで、あなたが尋ねるlocalStorageは何ですか?さて、localStorage は単なる Javascript オブジェクトです.しかし、それだけではありません.これは、開発者がクライアント側でデータをローカルに保存するために使用する Web Storage API の一部です. localStorage オブジェクトは、クライアント (ブラウザ) にデータを保存するために使用される 2 つのオブジェクトのうちの 1 つです.これらは localStorage および sessionStorage オブジェクトです.これら 2 種類のストレージ オブジェクトの主な違いは、localStorage はブラウザーが開いているときだけでなく、開いていないときもデータを格納するために使用されることです.つまり、データはブラウザーを閉じた後も保持されます. sessionStorage を使用すると、データのストレージは、ブラウザーがまだ開いている間のみ使用できます.

では、なぜ localStorage や sessionStorage を使用するのでしょうか?

HTML5 が登場する前は、データの保存に Cookie のみが使用されていました. Cookie はサーバーへのリクエストごとに送信され、localStorage や sessionStorage よりもストレージ容量が少なく (約 4kb)、セキュリティも低くなります. localStorage を使用すると、最大 5MB のスペースがあり、データを保存するための有効期限はありません.

localStorage を使用する場合

クライアント側のデータを保持して、セッションのようにページのリロード時に消えないようにしたい場合は、localStorage が優れたオプションになります.たとえば、Chrome 拡張機能を作成している場合、拡張機能でデータを保存し、ページを更新したときにデータを利用できるようにすることができます.

localStorage の使用方法

localStorage を使用するには、最初にグローバル window オブジェクトを介してアクセスする必要があります. window オブジェクトから localStorage を呼び出すと、取得するのは Storage オブジェクトのインスタンスであり、セッションとローカルの両方のストレージ タイプのデータ項目を設定、取得、および削除できます.

> window.localStorage
► Storage {length: 0}

簡単にするために、ここでは変数を使用して window.localStorage を参照します.

const myLocalStorage = window.localStorage

localStorage の使用を開始するには、使用可能な 5 つの異なる方法を簡単に見ていきましょう.

setItem() localStorage

の文字列として格納されるキーと値のペアを設定します

getItem() キー

を参照して、localStorage からデータ項目を取得します

removeItem() キーによって localStorage から特定のデータ項目を削除します

clear() localStorage を完全にクリアします

key() localStorage のキーの名前を取得するためにインデックス番号を受け入れます

myLocalStorage を使用して、これらのメソッドのいくつかを実際に見てみましょう.

// set up localStorage key and value
myLocalStorage.setItem("Name", "Tim Berners-Lee");

// retrieve the Name value
myLocalStorage.getItem("Name"); // Tim Berners-Lee

// access the Name key
myLocalStorage.key(0) // Name

これで、localStorage は次のように表示されます.

► Storage {Name: "Tim Berners-Lee", length: 1}

次に、localStorage からデータを削除する場合は、removeItem() メソッドを使用して特定のデータ項目を削除するか、ストレージを完全に空にする clear() を使用できます.この場合、削除するキーと値のペアが 1 つしかないため、どちらも同じことを行います.

myLocalStorage.removeItem("Name")
// Or
myLocalStorage.clear()

これにより、キーと値のペアが myLocalStorage から削除されます.

► Storage {length: 0}

値として文字列をハードコーディングするだけでなく、他のデータ型を myLocalStorage に格納したい場合はどうなるでしょうか?これが JSON.stringify() と JSON.parse() の出番です.以前のデータ項目を別のプロパティが追加されたオブジェクトとして保存し、そのオブジェクトを JSON 文字列に変換して setItem() に渡します.

const inventorOfTheWeb = {
    name: "Tim Berners-Lee",
    organization: "W3C"
}
localStorage.setItem("person", JSON.stringify(inventorOfTheWeb))

これで、ストレージは次のようになります.

► Storage {person: 
"{'name':'Tim Berners-Lee','organization':'W3C'}", length: 1}

ストレージから person を取得する必要がある場合は、JSON.parse() を使用してそれを解析し、オブジェクトに戻すことができます.

let storedPerson = JSON.parse(localStorage.getItem("person"))

結論

この記事では、localStorage を使用して Web 上にデータを保存する基本について説明しました.また、sessionStorage と Cookie を使用したデータ ストレージの他の方法についても簡単に説明しました.これらにはそれぞれ独自のユースケースがあるため、アプリケーションに実装するものを選択する際の特定の状況によって異なります.有効期限がなく、より大きなストレージ容量でクライアント側にデータを保存する必要がある場合は、localStorage が適している可能性があります.