cookieの時代は終わった。webstorageを使いformのデータをかんたん保存。

2015年6月24日更新 view: 16 view
https://connpass-tokyo.s3.amazonaws.com/event/5737/485a8c9f890349849685d50768a225b4.png

ページを離れた際、ブラウザを閉じた際にデータを保存しておきたい

formを閉じた時にデータをそのまま残しておきたい。
そんなわがままを叶える魔法の裏ワザ webstorage。
cookieよりもかんたんで、制限がない。

今回は webstorage と seriaraize でブラウザを離れてもフォームのデータが
そのまま残す裏ワザをご紹介。

スポンサードリンク

まずは unserialize化するためにファイルをパクる
https://github.com/Canta/unserialize

条件

  • #PeraAddFormのフォームを用意してね。データが切り替わった時に自動保存
  • ブラウザを表示した時にデータを再格納
  • jqueryはもちろん読み込んでおいてね
<script src="/app/webroot/js/unserialize.jquery.1.0.3.js"></script>
<script>

var storage = localStorage;
$(function () {

//前回のフォームのデータを復元
form_value_object = storage.getItem('formStorage');


if(form_value_object){
$("form#PeraAddForm").unserialize(form_value_object);

//変数に読み込み
//var obj = $.unserialize(form_value_object);
//削除
//storage.removeItem('formStorage');
}

//フォームのデータが変更される度に保存
$('form#PeraAddForm').on('keyup change', function(e) {
// var target = $( e.target )
var form_value_object;
form_value_object = $('form#PeraAddForm').serialize();
storage.setItem('formStorage', form_value_object);
});


});

</script>

はいたったこれだけなんです。
cookieの制限時間とか容量とか気にしなくていいのでいいですね。

フォーム送信時にデータを削除

$('form#PeraAddForm').on('keyup change click', function(e) {
var target = $( e.target )

if(target[0].type == "submit"){
storage.removeItem('formStorage');
} else {
var form_value_object;
form_value_object = $('form#PeraAddForm').serialize();
storage.setItem('formStorage', form_value_object);
}


});
スポンサードリンク

関連記事

関連カテゴリ