ローカルストレージを使ってブラウザにデータを保存します。
ほとんどのメジャーブラウザは対応していますが容量が5MBか10MBと違いがあります。
なので5MB程度に抑えておけば概ね問題ないでしょう。
Cookieと違い有効期限が現在ないので利用したら放置ではなくなるべく削除まで管理すると良いです。
保存
読み込み
削除
データはありません
データ表示エリア
初めにローカルストレージについての記述を書きます。
if (typeof localStorage == 'undefined') {
document.write("<p>お使いのブラウザではWeb Storageが使えません。</p>");
} else {
//ローカルストレージ設定
var storage = localStorage;
//ここに下記のそれぞれの処理を書きます。
}
保存
function setStrg() {
key = 'k';
v = $('form input#input_text').val();
if(v){
value = $('form input#input_text').val();
storage.setItem(key, value);
$('#msg').html(value+'を保存しました。');
}else{
$('#msg').html('入力情報がありません');
}
}
読み込み
function loadStrg(){
key = 'k';
v = storage.getItem(key);
if(v){
$('#my').html(v);
$('#msg').html('読み込みました');
}else{
$('#msg').html('データはありません');
}
}
削除
function removeStrg() {
storage.clear();
loadStrg();
$('#msg').html('削除しました。');
}
HTMLのサンプル
<form> <input type="text" name="text" size="30" value="" id="input_text" /> </form> <div class="demo_btn" onclick="setStrg;">保存</div> <div class="demo_btn" onclick="loadStrg();">読み込み</div> <div class="demo_btn" onclick="removeStrg();">削除</div> <div id="msg"></div> <div id="my">データ表示エリア</div>
