TEORICO

JavaScriptでlocalStorageを使った話

JavaScriptでlocalStorageを使った話

JavaScriptでlocalStorageを使った話

グロースハックを行なう時にこういう時は注意が必要!

私はKaizenPlatformでグロースハックを行なっています。

案件の中でお問い合わせなどのフォーム周り要素を新たに自作し追加した場合(例えばセレクトボックスなど)

次の確認画面では準備されていないものなので、ブラウザの戻るボタンをクリックすると新たなフォームで選択したはずのセレクトボックスの値を保持していないという事態が起きます。

基本的には元々実装されていないものは値を保持出来ないと考える

元々実装されていないので、戻るボタンを押しても、当然値は保持されずに初期値に戻ります。

そうすると、またフォームの入力や選択から始まってしまうので、ユーザーにとっては不快に思われがち、離脱率に繋がってしまいます。

対処法はないの!?

あることにはあります。

いくつかある中で今回使用したのはlocalStorage(ローカルストレージ)です。

ユーザーのブラウザに対して値を保持させます。

今回はこの機能を利用して、JavaScriptを使用し保持させる。

さらに取り出して設置ということを行いました。

こうすることで、元々実装されていないセレクトボックスなどでも値を保持させているように見せることが可能です。

サンプルソースは以下の通りです。

ただし、利用には注意が必要!

これを利用したら良いですよ!と言いつつもですね、注意点があります。

それはlocalStorageは値を半永久的に保存してしまうので、そこだけが問題かもしれません。

消す方法としては、ユーザー側で削除するか、ブラウザ側で削除するならば以下の通りです。

 

だったらlocalStorageもあまり使えないんじゃない?

そういうことを考え出すと、使い所は難しいですね。

 

そういった時のためにもう一つ、sessionStorageというものがあります。

こちらはブラウザが閉じられる(タブが閉じられても)値は消去されます。

使い方は基本的にlocalStorageと同じですので、localStorage部分をsessionStorageに変更するだけでOKです。

まとめ

使い所は難しいし、ユーザーのことを考えるとあまりよろしくはないかもしれない。

(単純にユーザーにとってゴミを溜めてしまうだけかもしれないので)

ユーザーのことを考えると、あまり重たくないデータを扱うのがいいかと思います。

制作者側からすると大変便利な機能です。

初めてアクセスされた時だけ何か表示させるなどに利用したり。

同じようにアクセスされたかどうかの判断材料の一つとしてはcookieを利用するという手もありますが、こちらの方が楽だと思います。

参考サイト

https://developer.mozilla.org/ja/docs/Web/API/Storage