JavaScriptでlocalStorageを使った話
JavaScriptでlocalStorageを使った話
グロースハックを行なう時にこういう時は注意が必要！
私はKaizenPlatformでグロースハックを行なっています。
案件の中でお問い合わせなどのフォーム周り要素を新たに自作し追加した場合（例えばセレクトボックスなど）
次の確認画面では準備されていないものなので、ブラウザの戻るボタンをクリックすると新たなフォームで選択したはずのセレクトボックスの値を保持していないという事態が起きます。
基本的には元々実装されていないものは値を保持出来ないと考える
元々実装されていないので、戻るボタンを押しても、当然値は保持されずに初期値に戻ります。
そうすると、またフォームの入力や選択から始まってしまうので、ユーザーにとっては不快に思われがち、離脱率に繋がってしまいます。
対処法はないの！？
あることにはあります。
いくつかある中で今回使用したのはlocalStorage（ローカルストレージ）です。
ユーザーのブラウザに対して値を保持させます。
今回はこの機能を利用して、JavaScriptを使用し保持させる。
さらに取り出して設置ということを行いました。
こうすることで、元々実装されていないセレクトボックスなどでも値を保持させているように見せることが可能です。
サンプルソースは以下の通りです。
/*
変数宣言
key → 取得するためのキー
set_value → キーを元にローカルストレージから値を取得し、その値を代入する
*/
var key = 'date_key';
var set_value = localStorage.getItem(key); // 要素の値を設定
$('セレクタ名').val(set_value); // 値が変更される毎に、要素を取得してローカルストレージに保存する
$('セレクタ名').on('change', function () {
var value = $('#セレクタ名').val();
localStorage.setItem(key, value);
});
ただし、利用には注意が必要！
これを利用したら良いですよ！と言いつつもですね、注意点があります。
それはlocalStorageは値を半永久的に保存してしまうので、そこだけが問題かもしれません。
消す方法としては、ユーザー側で削除するか、ブラウザ側で削除するならば以下の通りです。
// 任意のキーのlocalStorage削除 localStorage.removeItem(キーの名前) // localStorageをクリア（キーなどは関係無く全て） localStorage.clear()
だったらlocalStorageもあまり使えないんじゃない？
そういうことを考え出すと、使い所は難しいですね。
そういった時のためにもう一つ、sessionStorageというものがあります。
こちらはブラウザが閉じられる(タブが閉じられても)値は消去されます。
使い方は基本的にlocalStorageと同じですので、localStorage部分をsessionStorageに変更するだけでOKです。
まとめ
使い所は難しいし、ユーザーのことを考えるとあまりよろしくはないかもしれない。
（単純にユーザーにとってゴミを溜めてしまうだけかもしれないので）
ユーザーのことを考えると、あまり重たくないデータを扱うのがいいかと思います。
制作者側からすると大変便利な機能です。
初めてアクセスされた時だけ何か表示させるなどに利用したり。
同じようにアクセスされたかどうかの判断材料の一つとしてはcookieを利用するという手もありますが、こちらの方が楽だと思います。
参考サイト