HTML5 localStorage/sessionStorage にオブジェクトを保存する方法
HTML5 localStorage と sessionStorage は、ブラウザのローカルストレージにデータを保存するための API です。これらの API を使用すると、ユーザーのブラウザにデータを保存し、次回ユーザーがサイトを訪れたときにそのデータを読み取ることができます。
オブジェクトの保存
localStorage と sessionStorage はどちらもキーと値のペアとしてデータを保存します。オブジェクトを保存するには、まずオブジェクトを JSON 文字列に変換する必要があります。
JSON 文字列への変換
JavaScript には、オブジェクトを JSON 文字列に変換する JSON.stringify() メソッドが用意されています。
const object = {
name: "John Doe",
age: 30,
};
const json = JSON.stringify(object);
console.log(json); // {"name":"John Doe","age":30}
localStorage.setItem() メソッドを使用して、キーと値のペアを localStorage に保存できます。
localStorage.setItem("user", json);
sessionStorage.setItem("user", json);
const json = localStorage.getItem("user");
const object = JSON.parse(json);
console.log(object); // {name: "John Doe", age: 30}
const json = sessionStorage.getItem("user");
const object = JSON.parse(json);
console.log(object); // {name: "John Doe", age: 30}
localStorage.removeItem("user");
sessionStorage.removeItem("user");
注意事項
- localStorage と sessionStorage はブラウザごとに異なるストレージ領域を使用します。
- localStorage はブラウザが閉じられるまでデータが保存されます。
- 保存できるデータ量はブラウザによって異なります。
補足
上記の例では、オブジェクトを JSON 文字列に変換して保存しています。これは、オブジェクトをそのまま保存しようとすると、エラーが発生するためです。
さらに詳しく知りたい場合
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Local Storage サンプル</title>
</head>
<body>
<button onclick="save()">保存</button>
<button onclick="load()">読み込み</button>
<button onclick="remove()">削除</button>
<script src="script.js"></script>
</body>
</html>
JavaScript
const object = {
name: "John Doe",
age: 30,
};
function save() {
const json = JSON.stringify(object);
localStorage.setItem("user", json);
}
function load() {
const json = localStorage.getItem("user");
const object = JSON.parse(json);
console.log(object);
}
function remove() {
localStorage.removeItem("user");
}
このコードは、object オブジェクトを localStorage に保存し、読み込み、削除する方法を示しています。
実行方法
- 上記のコードを HTML ファイルと JavaScript ファイルに保存します。
- HTML ファイルをブラウザで開きます。
- "保存" ボタンをクリックします。
- コンソールを確認すると、
objectオブジェクトの内容が表示されます。 - コンソールには何も表示されません。
このコードは基本的な例です。実際の使用例では、エラー処理などを行う必要があります。
オブジェクトを HTML5 localStorage/sessionStorage に保存する他の方法
JSON.parse() と JSON.stringify() を使用せずにオブジェクトを localStorage/sessionStorage に保存するには、以下の方法があります。
オブジェクトを文字列に変換するには、以下の方法があります。
- オブジェクトの各プロパティをループ処理し、プロパティ名と値を連結する。
- オブジェクトを
toString()メソッドで文字列に変換する。
例：オブジェクトをループ処理して文字列に変換する
const object = {
name: "John Doe",
age: 30,
};
const json = "";
for (const prop in object) {
json += `${prop}:${object[prop]},\n`;
}
// 末尾の , を削除
json = json.slice(0, -2);
console.log(json); // name:John Doe,age:30
const object = {
name: "John Doe",
age: 30,
};
const json = object.toString();
console.log(json); // [object Object]
文字列を localStorage/sessionStorage に保存する
localStorage.setItem() または sessionStorage.setItem() メソッドを使用して、文字列を localStorage/sessionStorage に保存できます。
例：文字列を localStorage に保存する
const object = {
name: "John Doe",
age: 30,
};
const json = "";
for (const prop in object) {
json += `${prop}:${object[prop]},\n`;
}
// 末尾の , を削除
json = json.slice(0, -2);
localStorage.setItem("user", json);
const json = localStorage.getItem("user");
console.log(json); // name:John Doe,age:30
文字列をオブジェクトに変換する
eval() 関数または new Function() コンストラクタを使用して、文字列をオブジェクトに変換できます。
例：eval() 関数を使用して文字列をオブジェクトに変換する
const json = localStorage.getItem("user");
const object = eval(`(${json})`);
console.log(object); // {name: "John Doe", age: 30}
const json = localStorage.getItem("user");
const object = new Function(`return ${json}`)();
console.log(object); // {name: "John Doe", age: 30}
第三者ライブラリの使用
localForage や store.js などの第三者ライブラリを使用して、オブジェクトを localStorage/sessionStorage に保存することができます。これらのライブラリは、オブジェクトを JSON 文字列に変換したり、逆変換したりする必要なく、オブジェクトを直接保存/読み込みできる機能を提供します。
例：localForage を使用してオブジェクトを localStorage に保存する
import localforage from "localforage";
const object = {
name: "John Doe",
age: 30,
};
localforage.setItem("user", object).then(() => {
console.log("保存成功");
});
import store from "store";
const object = {
name: "John Doe",
age: 30,
};
store.set("user", object);
console.log("保存成功");
- JSON.parse() と JSON.stringify() を使用しない方法は、コードが複雑になる可能性があります。
- 第三者ライブラリを使用する場合は、ライブラリのドキュメントをよく読んでから使用してください。
javascript html local-storage
