JavaScript セーブデータを使う localStorage/html Canvas

html Canvas ゲームデータ等の保存に使うlocalStorage 自分用メモ。

めもめも

contents -目次-

localStorage・sessionStorage

html5から使える
データをブラウザに保存する（Cookieはサーバー保存）
データ容量がCookieより多い
ウィンドウを閉じるまで保存（sessionStorage）、または永続的に保存（localStorage）がある
基本的には別ドメインからの参照は不可

書き方 localStorage

保存 /setItem

”key” に ”value”値を保存

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

取得 /getItem

localStorage.getItem('key');

削除 /removeItem/clear

keyを指定して削除

localStorage.removeItem('key');
localStorage.removeItem('s_value');

全て削除

//ドメイン下のlocalStorage全て削除
localStorage.clear();

例

基本

let value = "ringo";
//s_valueにvalueの値"ringo"を保存
localStorage.setItem('s_value', value);
//s_valueの値を取り出す
let myValue = localStorage.getItem('s_value');
console.log('myValue: ', myValue);
//myValue:  ringo

複数のデータを保存

配列等複数のデータはJSON 文字列に変換して保存する

let myItem = ["item1", "item2", "item3", "item4", "item5"];
//JSON 文字列に変換して保存
localStorage.setItem("s_myItem", JSON.stringify(myItem));
//取り出す
myItem = JSON.parse(localStorage.getItem('s_myItem'));
console.log('myItem: ', myItem);
//myItem: (5) ['item1', 'item2', 'item3', 'item4', 'item5']

let myName="neko";
let myType="cat";
let myAge=3; 

let myProfile = {
      name: myName,
      type: myType,
      age: myAge
    };
//JSON 文字列に変換して保存
localStorage.setItem("s_myProfile", JSON.stringify(myProfile));
//取り出す
myProfile = JSON.parse(localStorage.getItem('s_myProfile'));
console.log('myProfile: ', myProfile);
//myProfile:  {name: 'neko', type: 'cat', age: 3}

//アクセスする時
myName=myProfile.name;
console.log(' myName: ', myName)
// myName:  neko

ゲームの中の複数のデータは、一つのオブジェクトにまとめて保存する

期限を決めて保存

参考：https://tcd-theme.com/2021/11/javascript-webstorage.html

// 有効期限の計算
const now = new Date();
const in_seven_days = new Date(now.getFullYear(),now.getMonth(),now.getDate()+7);
const diff = in_seven_days.getTime() - now.getTime();

// 有効期限を記録
sessionStorage.setItem('expiry', diff);
// 有効期限を取得
let getData = sessionStorage.getItem('expiry');

if (getData !== null) {
  if (getData >= 0) {
    // 有効な場合は、残り日数/時間を出力
    const days = Math.floor(getData / 1000 / 60 / 60 / 24);
    const hours = Math.floor(getData / 1000 / 60 / 60) % 24;
    console.log(`有効期限は7日間です。残り${days}日と${hours}時間有効です`);
  } else {
    // 期限切れの場合、データを削除
    localStorage.removeItem(getData);
    console.log('期限切れです');
  }
}

関連記事 JavaScript