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

データを保存

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

参考

• localStorageの使い方・実例全９件！
• LocalStorageをもっとデータベースライクに使う方法
• jsonを配列に、配列をJSONに