ここまで、サイト上の値の取得をパート①からパート③にわたって紹介してきましたが、今回はWebStorage編という形で紹介が出来ればと思います。内容自体はcookieにもかなり近いところもあるため、少し簡単な記事にできればと思ってます。
www.digitaldolphin.jp
www.digitaldolphin.jp
www.digitaldolphin.jp
目次
そもそもWebStorageとは何だったか？
cookieの記事と同じはじめ形になりますが、そもそもWebStorageって何だったっけという方もいらっしゃると思いますので、その復習から出来ればと思います。記事「サイト上の値の取得 ～パート①：前提知識～ - デジタル社会を泳ぐイルカ」でも紹介しように、WebStorageとは、cookieと同様にブラウザの保存領域ですが、cookieとは異なり、毎回閲覧しようとするページを持つWebサーバーに値を送信することはしないという特徴となっております。加えて、cookieと異なり、保存できる容量が5MBとかなり大きいというのもの特徴の一つです。
そして、このWebStorageには2つの種類があり、一つ目がLocalStorage、もう一つがSessionStorageとなっております。ここも以前紹介した内容と同じですが、LocalStorageはウィンドウを閉じて再度開いたタイミングや別タブで合っても値が残り続けますが、SessionStorageではウィンドウを閉じたタイミングや別タブで値は参照できない形になります。
では、このWebStorageは、なぜ登場したのでしょうか。
答えを考える上で、WebStorageの登場以前にあったcookieにおける課題を考えてみましょう。cookieは前回お話したように、Webページに訪れる度にWebサーバーにcookie情報を送らなければならず、容量も4kBと制限されておりました。そのため、ログインやECサイトにおけるカート情報などに対しては、非常に強力な機能だったのですが、Webサーバーとのやり取りが不要となった際には、容量が小さく不便な部分もありました。そこで、2010年ごろに出たHTML5にて、cookieとは異なり、Webサーバーへの通信が不要で、大きな容量を持つWebStorageというものが登場しました。
WebStorageに値をセットしたり、削除したり、取得したりする方法
折角なので、今回は値を取得するだけでなく、WebStorageに値を格納したり、値を削除したり、値を取得したりする方法をご紹介できればと思います。基本的には、WebStorageへの値のセットや削除、取得は全てJavaScriptで実施できるため、今までのようにブラウザの開発者ツールのコンソール画面を利用していければと思います。そして、コマンド自体も多くないので、まずは以下の表にコマンドをまとめておきます。
| コマンド | 説明 | 補足 |
|---|---|---|
| localStorage.setItem(key,value) | LocalStorageにkey-value形式のデータを格納 | key,valueはテキストとなるため、実際には「localStorage.setItem('name','dolphin')」のように記述 |
| localStorage.getItem(key) | LocalStorageからkeyに該当するデータを取得 | keyはテキストとなるため、実際には「localStorage.getItem('name')」のように記述 |
| localStorage.clear() | LocalStorageに格納されている全てのkey-value形式のデータを削除 | あまり使わない |
| localStorage.removeItem(key) | LocalStorageからkeyに該当するデータを削除 | keyはテキストとなるため、実際には「localStorage.removeItem('name')」のように記述 |
| sessionStorage.setItem(key,value) | sessionStorageにkey-value形式のデータを格納 | key,valueはテキストとなるため、実際には「sessionStorage.setItem('name','dolphin')」のように記述 |
| sessionStorage.getItem(key) | LocalStorageからkeyに該当するデータを取得 | keyはテキストとなるため、実際には「sessionStorage.getItem('name')」のように記述 |
| sessionStorage.clear() | sessionStorageに格納されている全てのkey-value形式のデータを削除 | あまり使わない |
| sessionStorage.removeItem(key) | sessionStorageからkeyに該当するデータを削除 | keyはテキストとなるため、実際には「sessionStorage.removeItem('name')」のように記述 |
この表を見てしまえば、正直今回の内容自体は完結してしまいますが、例えば以下のように'name=dolphin'というデータをLocalStorageに格納するJavaScriptを実行し、アプリケーションタブで対象のデータが入っているか確認してみましょう！
実行するJavaScript①
localStorage.setItem('name','dolphin');
そうすると、ちゃんとLocalStorageに値が格納されていることがわかるかと思います。そして、次にこの値をJavaScriptを実行して、取得してみましょう！
実行するJavaScript②
localStorage.getItem('name');
そうすると、先ほど格納した'name=dolphin'というデータのvalueの部分を取得出来たかと思います。最後に、この'name=dolphin'というデータをLocalStorageから削除してみましょう。
実行するJavaScript③
localStorage.removeItem('name');
今度は、アプリケーションタブにて、対象のデータが消えていることも確認できます。このようにして、先ほど挙げた表のようなJavaScriptを実行するだけで、WebStorageから値の格納、取得、削除が簡単出来ることが分かります。
さいごに
今回は、かなり簡易な内容となりましたが、上でご紹介している表を参考にWebStorageへの値の格納、取得、削除といったことを実践してみてください！
また、ここまで4つのパートで値の取得方法の話をメインでして来ましたが、あくまでも基礎的な内容となります。実際には値をGoogle Tag Managerの機能であるdataLayerを利用したり、Webページ上で定義されているJavaScriptの変数などの値から取得したりといった方法も存在しますので、その辺は興味があればもっと勉強してみてください！
