なるWeb 
どうも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を使ってみる。
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にそれぞれ値が格納されています
このようにしてデータを格納することができます。
2.LocalStorageから値を取得
次に格納された値を取得する方法
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で配列から削除する必要があります。
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が消えてしまいます。
そこで、値の一部を削除する時同様に、一度データを取得してから配列に値を追加するやり方でデータを格納する必要があります。
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]）
これで基礎的な処理はすべて書くことができました。
では実運用レベルまで持っていきましょう。
次の章が最後になります！！
