こんちには、フリーのITエンジニアでWeb(PHP：Laravel)のバッグエンドをメインにフルリモートでお仕事させて頂きながら、個人開発でiOSアプリを作っているMoritaです。
ユーザが画面ごとにテキストボックスやチェックボックスに入力した内容を、ページネーションで画面のリロードが発生してもLocalStorageに保存しておき、再度編集した画面を訪問した際に、先程の変更入力内容を表示させる方法を紹介します。
例えば
htmlのテーブルにテキストボックスやチェックボックスがあり、入力をしてページネーションでページを移動後、先程のページに戻っても入力内容は保存されません。
また、LocalStorageは別の画面へ離脱して戻ってもデータが保存されているため、不具合が起こる可能性があります。
そこで、LocalStorageにデータが保存されていれば確認メッセージを表示させ、OKならデータを削除します。
ただしその場合、ページネーションやメッセージを表示しない(データを消さない)ようにします。
具体的な実装の方法
jQueryを使用して画面の入力をLocalStorageに保存します。
ちなみに、JSONで保存するにはパースする必要があります。
// JSONで保存
var dataList = {};
dataList['key'] = 'data';
localStorage.setItem('dataList', JSON.stringify('dataList'));
// JSONからキャスト
var dataList = JSON.parse(localStorage.getItem('dataList));画面を離脱する際にLocalStorageのデータを削除します。
また、確認メッセージ離脱する前にはさみます。
// 画面離脱する時にデータを削除
$(window).on('unload', function(){
if(localStorage.getItem('dataList')){
localStorage.removeItem('dataList');
}
});// 離脱する前に確認メッセージを表示してOKなら離脱する
$(window).on('beforeunload', function(){
if(localStorage.getItem('dataList')){
return '保存が完了していません。このまま移動しますか？';
}
});これだけだと、ページネーションをした時にもunloadが発生しるので、
発生させたくないイベントにはunloadしないようにします。
$('対象セレクト').on('click', function(){
$(window).off('beforeunload');
$(window).off('unload');
});まとめ
jQueryを使用して、データを保存したいイベントでLocalStorageに保存し、
unloadする際にlocalStorageからデータを削除します。
また、必要があればbeforeunload や特定のイベントのunloadを無効にするなどします。
コメント