2018.06.08

JavaScript

ブラウザのLocalStorageにデータ保持させてみた

初めましてこんにちは、今年度新卒入社しました大作です。
大学時代では、Hot Soup Processorというスクリプト言語で簡単なゲーム開発しかしておらず、本格的なプログラマとしてデビューしてからまだ間もないヒナ鳥です。今は技術レベルや理解がまだ低いですが、これから日々勉強していきたいと思います！（ぴよぴよ）

今回やること

今、新人研修ではHTML, CSS, JavaScript(jQuery)を用いてアプリ制作をしているのですが、

ブラウザのリフレッシュしても入力したデータを保持する
保存するデータの中身は複数項目がある（日付とか件名とか）

以上の機能要件を満たすものを作っており（この時点で作っているものが大体想像つくであろう）、他の同期がサーバを用いた方法で紹介していますが、こちらでは入力したデータをブラウザのLocalStorageに保存する方法で実践します。

そもそもLocalStorageって何なんだ？

私自身の復習がてら調べました。
クライアント側のローカル環境にデータを保存するWebStorageの仕組みの一つで、もう一つにSessionStorageがある。それぞれの特徴は以下の通り。

LocalStorage‥‥永続的に保存される
SessionStorage‥‥ブラウザを閉じるまで保存される

LocalStorageが主に使用されているのがショッピングサイトの商品履歴だそうな。

やってみた実践コード

保存データは、配列の中にプロパティがそれぞれ入ったオブジェクトが入るようにします。ここでは、追加日付、名前、ラジオ（期限or予定）を入れてます

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ToDoList prototype</title>
</head>
<body>
    <div id="modal-wid">
        <input id="req-inp" type="text">
        <input id="del-inp" type="text">
        <div id="time-limit">
            <p><input id="lim-check" type="radio" name="TL">期限</p>
            <p><input id="lim-check" type="radio" name="TL">予定</p>
        </div>
        <button id="add-btn">決定</button>
        <button id="del-btn">削除</button>
    </div>
    <script src="http://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="test.js"></script>
</body>
</html>

JavaScript

$(function () {
    // 取得処理-----------------------------------------------------------------
    let allList = [];
    let json = localStorage.getItem('allList');
    json = JSON.parse(json);
    if (json) {
        allList = json;
    }
    for (let cnt = 0, len = allList.length; cnt < len; cnt++) {
        console.log(allList[cnt]);
    }
    // 追加ボタンのアクション ------------------------------------------------------
    $('#add-btn').on('click', () => {
        const requireEl = $('#req-inp').val();
        let radioEl = $("input[name='TL']:checked").parent().text();
        const now = new Date();
        const year = now.getFullYear(); // 年
        const month = now.getMonth() + 1; // 月
        const date = now.getDate(); // 日
        const hour = now.getHours(); // 時
        const min = now.getMinutes(); // 分
        let nowTime = `${year}年${month}月${date}日 ${hour}時${min}分`;
        if (requireEl !== '' & radioEl !== '') {
            let addObj = {
                time: nowTime,
                name: requireEl,
                radio: radioEl
            }
            allList.push(addObj)
            json = JSON.stringify(allList);
            localStorage.setItem('allList', json);
        }
    });
    // 消去 -------------------------------------------------------------------
    $('#del-btn').on('click', () => {
        const requireEl = $('#del-inp').val();
        var arraySearch = allList.findIndex(({name}) => name === requireEl);
        allList.splice(arraySearch, 1);
        // ローカルストレージに保存
        json = JSON.stringify(allList);
        localStorage.setItem('allList', json);
    });
});

取得処理で、データの中身が空だった場合にparseしたものを直接配列に入れると、配列の中身を読めないエラーを吐いてしまうため、if文で制御して入れないようにしました。（この問題に同期から助言を頂きました。感謝！）

まとめ

学び始めは理解に苦しみましたが、やっていくうちになんとかLocalStorageを用いたデータ保存が出来るようになりました！　感想としては、LocalStorageへの保存は簡単ですが、オブジェクトデータから中身を取得するのがとても大変でした。
次はAjaxでも出来るようにしてみようかと思います・・・・

エンジニア