cookieはあんまりいっぱい登録できない。
どういうことか
phpで作ったページがあるとする。
ページ遷移するついでにデータを送りたい。
<form>は別で使ってるので、送りたいデータはcookieに登録して、遷移後にそこから拾おうと思ってた。
そしたら、cookieに登録したい内容が多すぎてパンクしてcookieに登録できなかった。
どうしたもんだ。
もうちょっと具体的な話
wordpressでアンケート的なものを作ることになった。
問題をすべて解いて、回答内容はGoogleスプレッドシートに登録することにした（ContactForm7+CF7 Google Sheet Connector）。
CF7はサンクスページが表示されないので、DOMイベントを拾ってアンケート結果のページにリダイレクトすることにした。
アンケート結果の表示をしたいので、回答内容を引っ張ってくる必要がある。
だけど、CF7はページ上で送信が完了してるから入力データの移動がない。
だから、cookieに登録すればいいじゃんって思ったんだけど、送信内容が多すぎてcookieがパンクしたので使えない。
cookieを小分けにしてもいいっちゃいいんだけど、それもどうなのということで別案を考えましょう。
というはなし。
js(jQuery)でフォームを作って送信する
結構乱暴な方法だと思うけどね。
jsで以下のことができたらいい、という話になりますね。
- <form>を作る
- <input>を作る
- <form>を送信する
<form>を作る
こう。
$('<form>',{id:'toResult', method:'POST',action:'https://example.com/result/'}).appendTo('body');調べてて知ったんだけど、{}で要素を登録できるんですね。
便利ですね。
<input>を作る
<form>みたいに、こう。
$('<input>',{type:'hidden', name:'***', value: $('#inputForm input[name="***"]').val()}).appendTo('form#toResult');<form>を送信する
こう。
$('form#toResult').submit();formのsubmitと同じ動作をするので、データ送信とページ遷移が一括で行われる。
cf7だと例えばこんな感じ
実際に組み込んだ状況があまりにイレギュラー過ぎて載せても微妙だと思うけど微妙なのでしか組み上げてないからスタンダードな例が作れない。めんどい。ごめん。
<form id="inputForm">
<input type="text" name="***">
<button type="button" id="submitSpare">click</button>
<input type="submit" style="display: hidden;">
</form>$(function(){
$('button#submitSpare').on('click',function(){
$('<form>',{id:'toResult', method:'POST',action:'https://example.com/result/'}).appendTo('body');
$('<input>',{type:'hidden', name:'***', value: $('#inputForm input[name="***"]').val()}).appendTo('form#toResult');
$('form#inputForm input[type="submit"]').trigger('click');
})
})
$(document).on('wpcf7mailsent','.wpcf7',function(){
$('form#toResult').submit();
})送信ボタンからフォームが送信されると困るので、本物のsubmitは隠して代わりにbuttonを作る。
このbuttonがクリックされたときに、「遷移先に飛ばす用の<form>を作成」と「cf7の送信」をやる。
送信をクリックしたしたタイミングが入力内容確定のタイミングでもあるので、このときに遷移先に飛ばす用の<form>と<input>を作る、という考え方ですね。
フォームの送信処理が完了したタイミングで飛ばす用の<form>をsubmitする。
jQueryで発火させても、動作自体は普通にformのsubmitなので、<form>に仕込んだaction先に遷移してくれる、という流れ。
postされてるかどうかのチェック
遷移先でブラウザの検証機能を使えば覗くことができる。
以下はGoogleChromeを使った例。
- 「検証」を開く
- 「Network」タブを開く
- 「Name」リストから現在表示してるページを選択する
- 「Payload」タブを見る
以前のバージョンだと「Payload」タブじゃなくて「Headers」タブ内に表示されてたみたい（？）で、まあとにかくは、Networkを漁れば出てくると思ってれば間違いないですね。
cookieはあんまり使わないほうがいいよ
やっぱり、世の中でよく見る通り、ログインとかのやつに向いてる。
その場限りの用途だから保存期間なんか設定しなくていいというか、いちいち削除するのめんどくさいし、逆に残っちゃうリスクがあって厄介だし、何より今回みたいに上限に引っかかってデータが送れませんでした、みたいな状況も詰みになる。
やっぱりpostは偉大ですね。
<a>の代わりにsubmitを活用する筋道が考えられたら、できることが結構広がって良さげですね。
とはいえまあ、あんまりないと思うけどjsを切られたら動かなくなるのでそのへんも考えられたらいいですね。
コメント