【JavaScritpt】ブラウザ保存領域にデータを格納するlocalStorageの使い方

2021年4月6日JavaScript

JavaScritpでブラウザ保存領域にデータを格納するlocalStorageの使い方をまとめました。

Storageとは

Storageはブラウザの保存領域にデータを格納するためのオブジェクトです。
実際にはStorageというコンストラクターから生成されたlocalStrageを使用します。
localStrageを操作することで、ブラウザの特定の領域にデータを保存することができます。

localStrageの使い方

localStorage.setItem()

setItem()でlocalStorageにデータを格納することができます。

localStorage.setItem('key', 'value');

デベロッパーツールのApplicationタブのLocal Storageにてデータが格納されていることがわかります。

localStorage.getItem()

getItem()でlocalStorageのデータを取得することができます。

localStorage.setItem('key', 'value');
localStorage.setItem('key2', 'value2');
const key = localStorage.getItem('key');
const key2 = localStorage.getItem('key2');
console.log(key);//value
console.log(key2);//value2

また、これらは同期的に処理されます。

//オブジェクト
const object3 = { a: 0, b: 4, c: 7 };
// JSON文字列に変換
const json = JSON.stringify(object3);
// JSON文字列をローカルストレージに保存
localStorage.setItem('key1', json);

// JSON文字列をローカルストレージから取得
const jsonData = localStorage.getItem('key1');
console.log(jsonData); //{"a":0,"b":4,"c":7}

// JSON文字列からオブジェクトに変換
const parsedObject3 = JSON.parse(jsonData);
console.log(parsedObject3);//{a: 0, b: 4, c: 7}

JSONデータの操作方法については、次の記事を参考にしてみてください。