Localstorage(WebStorage) で安全に保存する

ずいぶん以前からですが、世界的にWEBサイトで「COOKIEを規制」しようという動きがあります。

例)
公正取引委員会、サイトでの「Cookie規制へ」報道 ( Yahoo!JAPAN ニュース )
https://news.yahoo.co.jp/byline/yamamotoichiro/20191029-00148795/

WEBシステムなどで、どうしても識別が必要なとき代替案として浮上するのが「LocalStorage (ブラウザ上に保存される情報)」 Vue.js を使って LocalStorage に保存・読み出しする方法が幾つかのWEBサイトに掲載されていたのでまとめておきます。

※ COOKIEとLocalstorage(WebStorage)の違いがわからない、という人は
https://qiita.com/pipiox/items/95554673ba3b078ac112

[ 画像の解説 ]

保存と読み出しを同じHTMLで表現しているので、少々荒っぽい説明になりますが。

準備するもの。
  • 画像の左上はブラウザ( Chrome )です。
  • 画像の右上は、デベロッパーツール「表示 – 開発 – デベロッパーツール 」「Application」タブを開けた状態です。
  • 画像の下はHTMLのソースコードです。
[ HTMLソースコードの解説 ]
3行目で Vue.js を読み込みます ( ここは記述はこのまま )
5行目で storedata に保存したい値を代入。
6行目で “onamae” というKEYに保存 ( これがいわゆるブラウザに保存 )。
5行目、6行目を LocalStorage に保存したとします。その後、
8行目で “onamae” の値を localdata に読み出し
9行目で id=”here” の後、正確には
と
の間に
「保存されたデータ : <input type="text" value="※読み出したデータ">」を表示。

[ 利用場面 ]

・MySQL / PostgreSQL 系のデータベース上に保存された中から、ユーザー識別する値をもとに必要なレコードを取得する
・WEBサイトでログイン後、あらかじめ保存しておいた値でログイン名を表示 使い道はいろいろあると思いますが、保存する情報の扱いにはくれぐれも気をつけて。

WORKSPACE