localStorageに複数のテキストを保存、取得したいです

Question

jQuery初心者です。みなさま教えて下さい。
今、簡易なメモパッドを作っています。
左側にはメモを書くテキストエリアを、右側にはメモした内容をlocalStorageから引っ張って過去のメモ履歴を一覧で作りたいと思っています。以下の記述ですと、localStorageのKeyには表題である<input>が入り、Valueには本文である<textarea>が入ると思いますが、

①メモを記入した時刻も入れたいと思います。どのようにすれば宜しいでしょうか？「JSON形式」にしないといけないものでしょうか？
②右側のメモ履歴の<dl>をクリックすると、左側の<input>と<textarea>に過去のメモが再度反映されるようにしたいのですが、どのようにすれば宜しいでしょうか？

html

    <div id="memopad">
        <input type="text" id="key">
        <textarea id="memo"></textarea>
        <li id="save">保存</li>
        <li id="clear">クリア</li>

    <div id="list">
        <dl id="line">
          <dt></dt>
          <dd></dd>
          <a></a>
        </dl>
    </div>

Javascript（jQuery）

/保存 クリックイベント
$("#save").on("click",function(){
    const key = $("#key").val();
    const value = $("#memo").val();
    localStorage.setItem(key,value);
    const html='<dl><dt>'+key+'</dt><dd>'+value+'</dd></dl>';
    $("#list").prepend(html);
});

//クリア クリックイベント
$("#clear").on("click",function(){
    $("#key").val("");
    $("#memo").val("");
});

//保存データ取得表示
for(let i=0; i<localStorage.length; i++){
    const key = localStorage.key(i);
    const value = localStorage.getItem(key);
    const html='<dl><dt>'+key+'</dt><dd>'+value+'</dd></dl>';
    $("#list").prepend(html);
}

拙いコード、拙い質問で申し訳ございませんが、分かる方がいらっしゃればご教示宜しくおねがいします。

Answer 1

ローカルストレージに全てのメモを都度保存していくと管理が煩雑になりますし、同一のキーの場合に上書きされるなどの問題もあります。

色々なやり方はあると思いますが、メモ自体は配列で管理しておき、配列をJSON形式で保存するのがシンプルだと思います。

MDN web docs : JSON

• parseメソッド : JSON文字列をオブジェクトに変換
• stringifyメソッド : オブジェクトをJSON文字列に変換

この二つを覚えておけばOKです。

const STORAGE_KEY = 'memo';

//格納用の配列
let data = [];

//保存データ取得
if(localStorage.getItem(STORAGE_KEY)) {
    data = JSON.parse(localStorage.getItem(STORAGE_KEY));
}

//保存データ表示
data.forEach(item => {
    const html = `
    <dl>
        <dt>${item.title}</dt>
        <dd>${item.value}</dd>
    </dl>`;
    $("#list").prepend(html);
})

//保存 クリックイベント
$("#save").on("click",function(){
    const title = $("#key").val();
    const value = $("#memo").val();

    //配列へ追加
    data.push({title, value});

    //配列をローカルストレージへ保存
    localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
});

---

①

Dateオブジェクトを使うと時刻を取得できます。
メモの内容と一緒にJSONで保存すれば良いかと思います。(保存のコードは②にまとめます)

//現在時刻取得
const date = new Date();
const year = date.getFullYear();
const month = date.getMonth();
const day = date.getDate();
const hour = date.getHours();
const minutes = date.getMinutes();
const seconds = date.getSeconds();
const milliseconds = date.getMilliseconds();
const time = `${year}/${month}/${day} ${hour}:${minutes}:${seconds}`;
console.log(time); // (例) 2019-10-27 18:00:00

②

こちらも色々やり方があると思いますが以下の方法はいかがでしょうか。(あくまで一例です)
0. 一意のメモIDを発行し、メモの内容と一緒に保存しておく
0. <dl></dl>タグにdata属性を持たせ、メモIDを保持する
0. クリックイベントでdata属性からメモIDを読み取り、配列からメモIDをキーにして対象のデータを読み出す
0. 読みだしたデータの中身をフォームにセットする

なお、保存時には新規と編集で処理が分かれるので、そのあたりも考慮が必要です。
↓の例では、メモをクリックした際にcurrentMemoという変数にクリックされたメモの内容を格納し、その変数に中身があるかどうかで新規か編集かを判別しています。

$(function() {
    const STORAGE_KEY = "memo";

    //格納用の配列
    let data = [];

    //編集中メモ保持用
    let currentMemo;

    //保存データ取得
    if(localStorage.getItem(STORAGE_KEY)) {
        data = JSON.parse(localStorage.getItem(STORAGE_KEY));
    }

    //保存データ表示(使いまわすため関数化)
    const loadData = () => {
        //一旦全部消す
        $("#list").html("");
        $("#key").val("");
        $("#memo").val("");
        currentMemo = undefined;

        data.forEach(item => {
            const html = `
            <dl data-memo-id="${item.memoId}">
                <dt>${item.title}(${item.time})</dt>
                <dd>${item.value}</dd>
            </dl>`;
            $("#list").prepend(html);
        })
    };

    loadData();

    //保存 クリックイベント
    $("#save").on("click",function(){
        const title = $("#key").val();
        const value = $("#memo").val();

        //現在時刻取得
        const date = new Date();
        const year = date.getFullYear();
        const month = date.getMonth();
        const day = date.getDate();
        const hour = date.getHours();
        const minutes = date.getMinutes();
        const seconds = date.getSeconds();
        const milliseconds = date.getMilliseconds();
        const now = `${year}/${month}/${day} ${hour}:${minutes}:${seconds}`;

        //編集なら元のtimeを使う
        const time = currentMemo ? currentMemo.time : now;

        //編集なら元のIDを使う
        const memoId = currentMemo ? currentMemo.memoId : `${year}${month}${day}${hour}${minutes}${seconds}${milliseconds}`;

        const newItem = {memoId, title, value, time};

        if(currentMemo) {
            //配列を編集
            const index = data.findIndex(n => n.memoId == memoId);
            data[index] = newItem;
        } else {
            //配列へ追加
            data.push(newItem);
        }

        //ローカルストレージへ保存
        localStorage.setItem(STORAGE_KEY, JSON.stringify(data));

        //再表示
        loadData();
    });

    //クリア クリックイベント
    $("#clear").on("click",function(){
        $("#key").val("");
        $("#memo").val("");
        currentMemo = undefined;
    });

    //読み出し(動的に追加した要素はこの書き方じゃないとイベント発火しません)
    $(document).on("click", "#list > dl", function() {

        //data属性からメモID取得
        const id = $(this).data("memo-id");

        //配列からメモIDをキーにしてデータ取得
        const memo = data.filter(n => n.memoId == id)[0];
        currentMemo = memo;
        
        //フォームへセット
        $("#key").val(memo.title);
        $("#memo").val(memo.value);
    });
});

Comments

[退会済みユーザー]

早速、回答していただきありがとうございます！実装できました！
こういうやり方があったのか「！」の気づきと、そもそも頭が追いついておらず読解できず「？」という内容もありましたが、シンプルなコードで助かりました。ありがとうございます。

Answer 2

localStorage は 簡便な キー・バリュー・ストレージ ですが、keyもvalueも文字列でなければならない制限があります。

Storage の派生オブジェクトなので、HTML Standard:Storage インタフェースを見てみます

[Exposed=Worker]
interface Storage {
  readonly attribute unsigned long length;
  DOMString? key(unsigned long index);
  getter DOMString? getItem(DOMString key);
  setter void setItem(DOMString key, DOMString value); // ここに注目！！
  deleter void removeItem(DOMString key);
  void clear();
};

setItem() 関数は、key,value 共に、DOMString（一般的なstring）しか指定できません。

ということで、オブジェクト構造を格納するには JSON.stringify() は必須です。