Web開発 - JavaScript：Window.localStrageを使ってブラウザにデータを保存する - ひとりでのアプリ開発

初めに

　本記事は、Window.localStrageを使って、ブラウザにデータを保存する方法をまとめます。

Index

初めに
Index
Window.localStrage
- Window.localStrageについて
使い方
ローカルストレージを使ってメモアプリを作成してみる
補足
- Window.sessionStrage
参考

Window.localStrage

Window.localStrageについて

　Window.localStrageを使うことで、ブラウザにデータを保存することができます。同じブラウザを使う場合であれば、ページを閉じ、再度当該ページを開いたときにもデータを保持することができます。

使い方

基本

keyとvalueのセットで保存する
格納できるデータは文字列（string）のみ
複数データをまとめて保存する場合は連想配列（JSONデータ）を文字列に変換して格納するとよい
格納可能な容量は5Mbyteまで
ブラウザに保存された値はJavaScriptでアクセスが可能なため、セキュリティ上問題ないデータのみを格納すること

データの保存

// データを保存
localStorage.setItem('key', 'value');

データの取得

// データを取得
var value = localStorage.getItem('key');

データの削除

// データを削除
localStorage.removeItem('key');

すべてのデータの削除

// 全てのデータを削除
localStorage.clear();

保存されたデータの確認

　F12キーを押して、デベロッパーツールを開きます。Application にある Local Strage 内のファイルに保存されていることが確認できます。また、ここからデータを削除することも可能です。

ローカルストレージを使ってメモアプリを作成してみる

完成図

機能

TextArea に入力した内容をボタン入力でローカルストレージに保存する
ローカルストレージに保存しているデータを TextArea と保存ボタンの下に表示する
ローカルストレージが使えないブラウザで保存しようとした場合、alert で通知する

コード全文

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple Memo App</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f2f2f2;
    }
    #memoContainer {
      max-width: 600px;
      margin: 20px auto;
      padding: 20px;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    textarea {
      width: 100%;
      height: 150px;
      margin-bottom: 10px;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
      resize: none;
    }
    button {
      padding: 10px 20px;
      background-color: #4caf50;
      color: #fff;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    button:hover {
      background-color: #45a049;
    }
    .memo {
      margin-top: 5px;
      margin-bottom: 5px;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
      background-color: #f9f9f9;
    }
  </style>
</head>
<body>

<div id="memoContainer">
  <textarea id="memoText" placeholder="メモを入力してください..."></textarea>
  <button onclick="saveMemo()">保存</button>
  <div id="memoList"></div>
</div>

<script>
  // ロード時に保存されたメモを表示する
  window.onload = function() {
    displayMemos();
  };

  // メモを保存する関数
  function saveMemo() {

    if (!window.localStorage) {
        alert("localstorage非対応");
        return;
    }

    var memoText = document.getElementById("memoText").value;
    if (memoText.trim() !== "") {
      var memos = localStorage.getItem("memos");
      if (!memos) {
        memos = [];
      } else {
        memos = JSON.parse(memos);
      }
      memos.push(memoText);
      window.localStorage.setItem("memos", JSON.stringify(memos));
      document.getElementById("memoText").value = "";
      displayMemos();
    }
  }

  // 保存されたメモを表示する関数
  function displayMemos() {
    var memoList = document.getElementById("memoList");
    memoList.innerHTML = "";
    var memos = window.localStorage.getItem("memos");
    if (memos) {
      memos = JSON.parse(memos);
      memos.forEach(function(memo, index) {
        var memoDiv = document.createElement("div");
        memoDiv.classList.add("memo");
        memoDiv.innerHTML = memo;
        memoList.appendChild(memoDiv);
      });
    }
  }
</script>

</body>
</html>