LoginSignup
11
7

More than 1 year has passed since last update.

localStorageデータ操作あれこれ(保存、取得、更新、削除など)

Last updated at Posted at 2022-05-11

データを保存

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

複数データを保存

let user_data = {
  gender: "男性",
  win: 0,
  lose: 0
}
localStorage.setItem("key", JSON.stringify(user_data)); //JSON形式へ変換

データを取得

localStorage.getItem("key");

取得したデータをJSONに変換し出力

JSON.parse(localStorage.getItem("key"));

JSONに変換する理由は、valueに複数の値がセットされている場合に “.” で繋ぐことにより値を取得できるため。

//key => user

//value
{"name":"田中","password":"xxxxxxx","win":"0","lose":"0",}

let data = JSON.parse(localStorage.getItem("user"));
console.log(data.name);

// 出力:田中

データを更新

基本的には localStorage.setItem("key", "value"); で上書き保存できるが、下記のように value に複数のデータが入っている場合、1つのデータのみ(nameの田中のみ)を更新し、その他のデータをそのまま保持させることはできない。
例えば、nameデータのみ更新する場合にlocalStorage.setItem("user", "ブライアン");としてしまうとname以外のデータは消えてしまう。なので下記のような記述が必要。

//key => user

//value
{"name":"田中","password":"xxxxxxx","win":"0","lose":"0",}

//value
let data = {
	"name": "ブライアン", //名前のみの更新でも全てのデータを上書きが必要
	"password": "xxxxxxx",
	"win": 0,
	"lose": 0
}
localStorage.setItem("user", JSON.stringify(data));

特定のデータを削除

localStorage.removeItem("key");

全データを削除

localStorage.clear();

特定のキーが存在しているかチェックする

if(localStorage.hasOwnProperty("key")) {
    console.log("このキーは存在しています");
}

戻り値はデータが存在すれば true
データが存在しなければ false

参考

11
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
7