javascriptで取得したcookieを次のページのinput内に反映させたい

Question

javascriptでフォームのemailに入力されたメールアドレスをcookieで保存しました。

このアドレスを遷移後のフォームのメールアドレス欄にセットしたいのですが、基本的にセット済みのcookieデータはどのように取り出せばよいでしょうか？

また、console.log(document.cookie); 　といった感じで確認を行いますと今回設定したものとは関係のないcookieが沢山表示されてしまいます。

取得表示を行いたいのは、emailcookie　の　cookieValue、つまりアドレス部分を取得しinputに設定を行いたいです。

ご教授のほどよろしくお願いいたします。

  <script type="text/javascript">
    var email = document.getElementById("email");
    function writeCookie() {
      var cookieValue = email.value;
      document.cookie = "emailcookie=" + cookieValue;
    }
  </script>

Answer 1

cookieよりlocalStorageのほうが直感的な取出しができると思います。

【Web Storage API の使用 - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API

【ブラウザにデータを保存するlocalStorage（ローカルストレージ）の使い方 | 株式会社グランフェアズ】
https://www.granfairs.com/blog/staff/local-storage-01

Comments

[yukina00235]

有難うございます、初心者物で…、初めてlocalStorageなるものを聞きました。
こちらも調べてみたいと思います。

Answer 2

基本的にセット済みのcookieデータはどのように取り出せばよいでしょうか？

document.cookieから目的のものを切り出してください。

また、console.log(document.cookie); 　といった感じで確認を行いますと今回設定したものとは関係のないcookieが沢山表示されてしまいます。

そういう仕様なので、この中から探してピックアップするしかありません。

Comments

[yukina00235]

有難うございます、そうなのですね配列で返ってきたので。。
切り出して取り出すように致します。

Answer 3

面倒であればjQuery＋クッキーライブラリで処理すればよいでしょう

Comments

[yambejp]

//home.html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script>
$(function(){
$('#s').on('change',function(){
$.cookie('x',$(this).val());
}).trigger('change');
});
</script>
<select id="s">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<a href="next.html">next</a>

//next.html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script>
$(function(){
$('#x').val($.cookie('x'));
});
</script>
<input type="text" id="x" name="x">

[yukina00235]

有難うございます、調べてみますとjQueryからですと簡単に色々と行えるようですね。
具体的なソースも有難うございます。mm