お気に入りページを保存するスクリプト

お気に入りを保持するスクリプト

お気に入りのURLを入力すると保持できるようにするためのプログラムを作成しました。

実物を見てもらったほうが良いかもしれません。

こういう機能って、Wordpressのプラグインとかで存在するのですが、そのままのスクリプトを探すのがけっこう大変だったりします。

Wordpress以外で同じようなことを実現するためには、何らかのスクリプトを組む必要があります。

どんなところで、このようなスクリプトが組んであるのか？というと、スーパーのホームページです。

例えば、こことか、こことか他にも大手スーパーなどではよく見かける仕組みです。

Wordpressのプラグインを使ってしまうのが一番簡単です。しかし、様々な理由でWordpressが使えないような状況下においては、自分で組み込みをかけるしかありません。

「お気に入り機能実装 JavaScript」などで検索すると、意外と関連記事が見つかります。その中から使えそうなものをピックアップして利用するのも良いかもしれません。

LaravelとかVue.jsとかフレームワークを使って実装するやり方などもあるようです。

PHPとかで組むのが一番楽そうです。だから、Wordpressのプラグインに存在したりするんですね。Cookieやキャッシュなどブラウザ側の機能を使う場合は、HTMLやCSSでは無理です。ただ、Javascriptであれば、それは実現可能。

というわけで、Javascriptのみで構築してみました。

中身はシンプルです。

HTHL5から導入されたWEB APIの一種である、Local Storageを使います。Local Storageは、Javascriptでブラウザにデータを記録する仕組みです。

利点としては、cookieのようにWEBサーバーにデータを保存するのではなくブラウザに保存するので、ブラウザを閉じてもユーザーの入力情報などを保持し続けることができます。

主要なブラウザなら5MBまでデータを保存できます。

ただ、Local Storageのデータを削除する処理を書かないと、データは永続的に残り続けるので注意が必要です。

また、Javascriptから自由にアクセスができてしまうので、ユーザーの個人情報など、機密性の高い情報には使わないようにしなければなりません。セキュリティ的によくありません。

localStorage.setItem('key', 'value')あるいはlocalStorage.saveKey = 'value'と書くだけで保存ができます。

localStorage.getItem('Key')あるいはlocalStorage.saveKeyでvalueを取得することができます。

localStorage.removeItem('key')で指定したキーのデータを削除するか、localStorage.clear()ですべてのデータを削除します。

詳しくは、ソースコードを見てみてください。

コメントも入れてあるので、わかりやすいかと思います。