Storage: setItem() メソッド
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
setItem()
は Storage
インターフェイスのメソッドで、キーの名前と値を Storage
オブジェクトに渡すと、ストレージにキーを追加したり、またはキーがすでに存在する場合はキーに対する値を更新したりします。
構文
js
setItem(keyName, keyValue)
引数
返値
なし (undefined
)。
例外
setItem()
は、ストレージが満杯である場合に例外が発生します。開発者は、setItem()
で発生する可能性がある例外を常に捕捉するようにしてください。
例
以下の関数はローカルストレージに 3 個のデータアイテムを作成します。
js
function populateStorage() {
localStorage.setItem("bgcolor", "red");
localStorage.setItem("font", "Helvetica");
localStorage.setItem("image", "myCat.png");
}
メモ: 現実世界のの例として、Web Storage Demo をご覧ください。
Storage
は文字列の格納と取り出しにのみ対応しています。他にもデータ型を保存したい場合は、文字列に変換する必要があります。プレーンなオブジェクトや配列の場合は JSON.stringify()
を使用します。
js
const person = { name: "Alex" };
localStorage.setItem("user", person);
console.log(localStorage.getItem("user")); // "[object Object]"; not useful!
localStorage.setItem("user", JSON.stringify(person));
console.log(JSON.parse(localStorage.getItem("user"))); // { name: "Alex" }
しかし、任意のデータ型を格納するために汎用的な方法はありません。さらに、取得されたオブジェクトは元オブジェクトのディープコピーであり、それに対する変更は元オブジェクトには影響しません。
仕様書
Specification |
---|
HTML Standard # dom-storage-setitem-dev |
ブラウザーの互換性
BCD tables only load in the browser