Help us understand the problem. What is going on with this article?

javascriptのLocalStorage を使ってお気に入り機能を自作してみた ②実装編-基盤作り-

どうも7noteです。プラグインより多機能なお気に入り機能を作成。前回の続き

①準備編がまだの方はこちら

今回作るお気に入り機能の特徴

  • JSON形式にして配列のまま保存。呼び出す時もJSONから普通の配列に戻して使用
  • 重複登録ができないように処理する
  • wordpressと絡める場合はphpの知識も多少必要

今回のメインソース

メイン基盤となるプログラムを書いていきます。
完成予定図は以下の通り。

完成予定図.js
/*お気に入りに追加機能*/
function addfav(oid){

    var key = 'お気に入りID';                                   

    var getjson = localStorage.getItem(key);
    var oidlist = JSON.parse(getjson);
    if(oidlist == null){
        oidary = new Array(oid);
        var setjson = JSON.stringify(oidary);
        localStorage.setItem(key, setjson);
    } else {
        if(oidlist.indexOf(oid) == -1){
            oidlist.push(oid);
            var setjson = JSON.stringify(oidlist);
            localStorage.setItem(key, setjson);
        }
    }
}

/*お気に入りから削除機能*/
function removefav(oid){

    var key = 'お気に入りID';

    var getjson = localStorage.getItem(key);
    var oidlist = JSON.parse(getjson);
    if(oidlist != null){
        var checkitem = oidlist.indexOf(oid);
        if(checkitem != -1){
            oidlist.splice( checkitem, 1 );
            var setjson = JSON.stringify(oidlist);
            localStorage.setItem(key, setjson);
        }
    }
}

※このソースだけでは何も動きません。これは関数なのでどこかで実行させないと動かない!

それではさっそく解説しながら一から書いていきたいと思います。

1.とりあえずLocalStorageを使ってみる。

script.js
var key = 'お気に入りID';                 /* keyの名前を決める。日本語もOK。 */
var oidary = new Array("No:20");        /* 値を決める。あとで複数の値を保持する予定なので配列形式に。 */
var setjson = JSON.stringify(oidary);   /* JSON形式に変換 */
localStorage.setItem(key, setjson);     /* ローカルストレージにデータを格納 */

上のスクリプトを動かすと、ブラウザのローカルストレージにデータを格納できます。
このスクリプトの場合、以下のようなデータが保管されます。

キー → お気に入りID
値  → No:20

実際に格納されているデータを見るには以下の手順で確認できます。

→「F12キーで検証ツールを開く」
→「Applicationタブを選択」
→「Storage欄のLocal Storageをクリック」
→「【file://】をクリック」
→KeyとValueにそれぞれ値が格納されています

実際の画面がこちら↓
f12.png

このようにしてデータを格納することができます。

2.LocalStorageから値を取得

次に格納された値を取得する方法

script.js
var key = 'お気に入りID';                  /* 取得するキーを指定 */
var getjson = localStorage.getItem(key); /* ローカルストレージから値を取得 */
var oidlist = JSON.parse(getjson);       /* 取得したデータがJSON形式から元に戻す */

console.log(oidlist); /* デバッグ用 */

localStorage.getItem()で特定のキーの値を取得することができます。
JSON形式で保存しているので、元の形式に戻すために、JSON.parse()をします。

3.LocalStorageから値を削除

特定の値のみ削除するには、一度値を取得してjavascriptで配列から削除する必要があります。

script.js
  var key = 'お気に入りID';                   /* 取得するキーを指定 */
  var oid = 'No:25';                        /* 取得するキーを指定 */
  var getjson = localStorage.getItem(key);  /* ローカルストレージから値を取得 */
  var oidlist = JSON.parse(getjson);        /* 取得したデータがJSON形式から元に戻す */
  var checkitem = oidlist.indexOf(oid);     /* 削除する値の配列番号を確認 */
  if(oidlist.indexOf(oid) != -1){           /* 値が存在するか確認 */
    oidlist.splice( checkitem, 1 );         /* 指定の値を削除 */
    var setjson = JSON.stringify(oidlist);  /* JSON形式に変換 */
    localStorage.setItem(key, setjson);     /* ローカルストレージにデータを格納 */
  }

ローカルストレージには、値を削除するStorage.removeItem()がありますが、これは値をすべて削除してしまうため、お気に入り登録した他のものまで削除してしまいます。


Storage.removeItem()をつかってしまった例
「No:20とNo:33をお気に入りしてました。」
「No:20をお気に入りから削除しようとしました。」

理想

{お気に入りID: "No:20", "No:33"}
↓(削除後)
{お気に入りID: "No:33"}

現実

{お気に入りID: "No:20", "No:33"}
↓(削除後)
{お気に入りID: }


JSON形式で値を格納しているため、一部の値のみ削除するには一度取り出す必要があるのです。
上記のプログラムでは、本当にその値があるかどうかを確認してから消すようにしています。

4.LocalStorageに値を追加する時の処理を見直す

ローカルストレージの特徴として、1つのキーには1つの値しかいれることができません。
そのため、同じキーにデータを入れると上書きされてしまいます。

上の1.2.3.で書いたスクリプトを単純にそのまま使っても、No:20をすでにお気に入りしていたとして、No:33を新しくお気に入りに追加すると、元のNo:20が消えてしまいます。

そこで、値の一部を削除する時同様に、一度データを取得してから配列に値を追加するやり方でデータを格納する必要があります。

script.js
var key = 'お気に入りID';                  /* 取得するキーを指定 */
var oid = "No:33";                       /* 格納するキーを指定 */
var getjson = localStorage.getItem(key); /* ローカルストレージから値を取得 */
var oidlist = JSON.parse(getjson);       /* 取得したデータがJSON形式から元に戻す */
if(oidlist.indexOf(oid) == -1){          /* 重複していないか確認 */
  oidlist.push(oid);                     /* 配列に値を追加 */
  var setjson = JSON.stringify(oidlist); /* JSON形式に変換 */
  localStorage.setItem(key, setjson);    /* ローカルストレージにデータを格納 */
}

※ローカルストレージにお気に入りIDというキーが存在しないまま動かすと、値(配列)が取得できずにエラーになります。1.の手順を事前に行うなどしてキーを作成してください。
検証ツール上で手動で追加することもできます。(ダブルクリック or 右クリックからの[Add new])

これで基礎的な処理はすべて書くことができました。
では実運用レベルまで持っていきましょう。

次の章が最後になります!!

【続き】③実装編-基盤作り-

前回(①準備編)の記事はこちら

おそまつ!

~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ

7note
フロントエンジニア4年目。4〜5人ほど後輩の育成経験もあり。HTML・CSS初心者向けにわかりやすい記事を意識して書いていきます!目標毎日更新。自社開発を中心にWEBサイト制作を行っています。約40件のHP制作経験あり。Wordpressで独自テーマの開発などもちょこちょこやってます。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away