タグ:Web Storage
機能 | ウィンドウ(タブ)同士でデータの共有 | データの有効期限 | データ量の上限 |
---|---|---|---|
クッキー | ○ | 指定期限まで有効 | 4KBに制限 |
sessionStorage | × | ウィンドウやタブを 閉じるまで有効 |
1オリジン当たり5MB |
localStorage | ○ | 永続的に有効 | 1オリジン当たり5MB |
// Web Storageの対応ブラウザ確認 if(!localStorage) { alert("このブラウザはlocalStorageを利用できません"); } if(!sessionStorage) { alert("このブラウザはsessionStorageを利用できません"); }
// データの保存 localStorage.setltem(キー,値); // キーを指定したデータの読み出し v = localStorage.getItem(キー);
// データの保存 localStorage.キー = 値; // キーを指定したデータの読み出し v = localStorage.キー;
// データの保存 localStorage[キー] = 値; // キーを指定したデータの読み出し v = localStorage[キー];
<body onload="load()"> <form> 月日:<input type="date" id="input1"><br> 内容:<input type="text" id="input2"><br> <button type="button" onClick="input()">予定を登録</button> </form> <div id="output"> <table border cellpadding="5"> <tr><th>月日</th><th>内容</th><th>削除</th></tr> </table> </div> </body>
var a = new Array(); // HTML文章の読み込み完了時に実行(※1) function load() { // localStoprageからキーyoteiに対する値を読み出す var ls = localStorage.getItem("yotei"); if(ls != null){ // 読み出した値をJSON.parseして配列に代入 a = JSON.parse(ls); } else { a = []; } show(); } // 「値を入れたらクリック」ボタンをクリック時に実行(※4) function input() { if(document.getElementById("input1").value == "" || document.getElementById("input2").value == "") { alert("入力値が空白です"); } else { a.push({"gappi" : document.getElementById("input1").value, "memo" : document.getElementById("input2").value}); save(); } } // 「削除」ボタンがクリックされたら実行(※6) function deleteValue(x) { a.splice(x, 1); save(); } // 配列aの要素を昇順に並べてテーブル形式で画面に表示(※3) function show() { var s = '<table border ' + 'cellpadding = "5" ' + '<tr><th>月日</th><th>内容</th><th>削除</th></tr>'; sorting(); for (var i = 0; i < a.length; i++) { s += '<tr>'; for(var p in a[i]) { s += '<td>' + a[i][p] + '</td>'; } s += '<td><button type="button" onclick="deleteValue(' + i + ')">削除</button></td>'; s += '</tr>'; } s += '</table>'; document.getElementById("output").innerHTML = s; } // 配列aをlocalStorageに保存した後、昇順に並べて画面に表示(※5) function save() { localStorage.setItem("yotei" , JSON.stringify(a)); show(); } // 配列の要素を昇順に並び替え(※2) function sorting() { for(var i = 0; i < a.length; i++) { a[i] = JSON.stringify(a[i]); } a.sort(); for(i = 0; i < a.length; i++) { a[i] = JSON.parse(a[i]); } }