イイダリョウのブログ。【JS】ローカルストレージの値をリンク先のフォームのinputタグのvalueに渡す!2018-07-11【JS】ローカルストレージの値をリンク先のフォームのinputタグのvalueに渡す!JS前回、URLの後ろにつけたパラメータをフォームのinputタグのvalueに渡す方法をご紹介いたしました。この時ネックになったのが、別ページへの回遊やサイト離脱です。再訪したユーザーがフォームを送信するときにはパラメータが失われているため効果の計測ができません。この対策として「ローカルストレージ」を試してみました。最後にローカルストレージとはなんぞや冒頭に書いたように回遊や離脱をしたユーザーの再訪を計測することは難しいのですが、その対策として以前からある技術に「Cookie」というものがあります。「クッキー」と読みます。食べられない方のクッキー*1、芸人じゃない方のクッキーです。サルワカさんのページが詳しい。間違いやすいキャッシュとの違いもよくわかる!※参考:クッキー(cookie)とは?初心者でも分かるように図解しかしながら、前回の最後にも触れたように、Cookieはだんだんと好まれない風潮になりつつあるような気がしないでもない今日この頃です。Safariはサイトを超えたCookie情報の送信(サードパーテcookie)をブロックする「ITP」という機能を搭載しました。Web担当者ForumCookieに変わる技術として注目されるのが「ローカルストレージ」です。基本的にブラウザのローカル領域に情報が溜まり、サーバとの無駄な通信は生じません。一つの「セッションストレージ」と併せて「Webストレージ」と言います。※Webストレージローカルストレージ:ブラウザを閉じても情報が残るセッションストレージ:ブラウザを閉じると情報が消えるこのページの解説が詳しい。株式会社グランフェアズCaniuseで見るとすでにローカルストレージは全ブラウザが対応済みです!IEタソも対応していた模様。etc時がきた!それだけだ。ローカルストレージの基本書式ローカルストレージの基本書式はこんなです。'値');//データの削除localStorage.removeItem('キー');保存はsetItem()メソッド、取得はgetItem()メソッド。sとgの違いなので覚えやすいですね。引数にはキー、値の順番で入れます。削除はremoveItem()メソッド。こちらの引数はキーのみです。こんなページがあるとする。class="ketsuron"><h2>結論タイトル結論タイトル結論タイトル</h2><p>大金持ちになれる!なれる!なれる!なれる!なれる!なれる!なれる!なれる!なれる!なれる!なれる!なれる!なれる!なれる!なれる!なれる!なれる!なれるぞぉーーーー!!。href="form.html">今すぐ問い合わせる!!</a></aside></article>こんな感じのページです。CodePen.この#btnのボタンをクリックしたらローカルストレージに値を保存したい。false);}変数btnにID#btnのボタンのDOMを取得btnにイベントリスナでクリックイベントを設定btnをクリックするとローカルストレージのboowyキーの値psychoと保存(BOØWYは最高)。次にリンク先のページを作ります。id="thisreferer"></span>」です。</P>id#thisrefererのspanタグにリンク元ページのローカルストレージの値を表示したい。referer;変数refererでリンク元ページのboowyキーのローカルストレージを取得#thisrefererのタグの中身をrefererを代入こんな感じです。CodePen.先ほどJSを書き加えたリンク元ページはこちらです。おめでとうございます!リンク元ページのローカルストレージの値がページを超えてリンク先ページのローカルストレージに保存されました!フォームのinputのvalueに値を渡すページを超えてローカルストレージの値が渡せることがわかりました。次に、前回のパラメータと同様にこの値をフォームのinputタグのvalue属性に渡したいですね。フォームはこのような形です。</form>前回のID#inputparamを#inputrefererに変更しました。次にJSを追記します。CodePen.先ほどのリンク元のボタンのURLを変更しました。キーboowyの値をboowy2にしました。CodePen.どうですか?「ローカルストレージ」のところに「psycho2」が表示されたはずです。inputタグのtype属性をhiddenにして非表示に前回同様、inputタグのtype属性をhiddenにして非表示にしたい。CodePen.またまたリンク元のボタンのURLを変更。「今すぐ問い合わせる」ボタンをクリックしてみてください。CodePen.ブラウザのデベロッパーツールで「ローカルストレージ」のinputタグのvalueをみていただくと「psycho3」になっているはずです。Qiitaローカルストレージの値を削除さあ、ここまで進んだあなたのブラウザのローカルストレージはboowyキーの値が上書きされてpsycho3になっていると思います。ここから別のボタンをクリックすると、そのたびに値は上書きされます。いちど最初の状態からやり直したい方は、こちらの「今すぐ値を削除」ボタンを押してください。CodePen.ちなみにこのボタンには最初に紹介したremoveItem()メソッドを設定しています。false);ボタンをクリック後にブラウザをリロードしてみてください。ローカルストレージの中身は空になります。最後にローカルストレージの値がページを超えて渡せるのは感動しました!リンク先のURLにパラメータを付けないで済むので、ユーザーの警戒感が低くなる効果が見込めると思います!ほとんどローカルのみの挙動なのでcookieよりセキュリティ面でも優れていますし、JSのみで完結するため、大掛かりなASPシステムも不要です。メリットがたくさんありますね!また新しい活用法があればご紹介したく思います。22:51Tweet関連記事2019-08-22【Vue.js】コンポーネントにpropsオプションで値を渡すVue.jsシリーズの続きです。前回はコンポーネントにカウンター...2019-08-14【Vue.js】コンポーネント事始め(グローバル登録とローカル登録)Vue.jsシリーズの続きです。前回まではlocalSltrageとの連携で...2019-08-04【Vue.js】localStorageと連携したTodoリストを読み解く(JS編-2)Vue.jsシリーズ、公式サイトのサンプルにあったlocalStorageと...2019-07-31【Vue.js】localStorageと連携したTodoリストを読み解く(JS編-1)Vue.jsシリーズ、公式サイトのサンプルにあったlocalStorageと...2019-05-29【Vue.js】v-bindでclass名を動的に追加、削除する!(北斗の拳の名言編)Vue.jsの続きです。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。