window.localStorage Test kkeisuke Follow 2010-10-06 12:31:45 License: MIT License Fork0 Fav3 View1136 window.localStorage の勉強 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 123 lines HTML 22 lines CSS 1 lines window.localStorage の勉強 window.localStorage Test jQuery v1.4.2 (function(){ /* XSS 対策 */ // http://blog.livedoor.jp/dankogai/archives/51522584.html を参考にさせて頂きました。ありがとうございます。 function AntiXss() { this.re = new RegExp("(?:https?://[\\x21-\\x7e]+)|(?:[<>&])", 'g'); } AntiXss.prototype = { _makeLink:function(href, text){ var a = document.createElement('a'); a.href = href; a.appendChild(document.createTextNode(text)); var div = document.createElement('div'); div.appendChild(a); return div.innerHTML; }, parseTextRight:function(s){ var scope = this; return s.replace(this.re, function(m0){ if (m0.match(/^[<>&]$/)) { return { '<': '<', '>': '>', '&': '&' }[m0]; }else if(m0.match(/^http/)){ return scope._makeLink(m0, m0); }else{ return m0 } }) } }; var antiXSS = new AntiXss(); // 実行 $(function(){ // window.localStorage の有無 var storage = window.localStorage; if(storage == null){ alert("window.localStorage に対応していません"); return; } /* 初期表示 */ // 表示させるリストを作成 $("#Memo").after('<ol id="List"></ol>'); // 保存されているリストを展開 // 通し番号 null の時は 0 var num = Number(storage.getItem("SoliloquyToal")); for (var i=0; i<num; i++) { var item = storage.getItem("Soliloquy"+i); if(item != null){ setList(i, item); } }; /* イベントハンドラー */ // 投稿 $("#Save").bind("click", function(){ var textdata = $("#Soliloquy").val(); if(textdata == ""){ return; } setList(num, textdata); storage.setItem("Soliloquy"+num, textdata); num++; storage.setItem("SoliloquyToal", num); }); /* イベントハンドラー */ // 全削除 $("#ClearAll").bind("click", function(){ storage.clear(); for (var i=0; i<num; i++) { $("#Clear"+i).unbind("click"); }; $("#List li").remove(); num = 0; }); /* 関数 */ // リストを表示 function setList(n, t){ // XSS 対策 t = antiXSS.parseTextRight(t); // 改行を br へ t = t.replace(/\n|\r/g, "<br>"); $("#List").append('<li><p>' + t + '</p><p><input id="Clear'+n+'" name="Clear'+n+'" value="clear" type="button"></p></li>'); $("#Clear"+n).bind("click", function(){ storage.removeItem("Soliloquy"+n); $(this).unbind("click"); $(this).parents().eq(1).remove(); }); } }); })(); <h1>Soliloquy</h1> <p>window.localStorage を使用したメモアプリのモック</p> <textarea id="Soliloquy" name="Soliloquy" rows="5" cols="50"></textarea><br> <input id="Save" name="Save" value="save" type="button"> <input id="ClearAll" name="ClearAll" value="clear all" type="button"> <h2 id="Memo">メモ</h2> <h2>課題</h2> <ul> <li>キャッシュマニフェストも使う。</li> <li>容量を取得できないか？</li> <li>CSS3 を使ったデザイン/アニメーション</li> <li>保存するデータは、オブジェクトでまとめたほうが良かったかな？</li> </ul> <h2>参考</h2> <ul> <li><a href="http://www.html5.jp/trans/w3c_webstorage.html#storage" class="blank">Web Storage - W3C Editor's Draft 18 August 2009 日本語訳 - HTML5.JP</a></li> <li><a href="http://www.extjs.co.jp/blog/2010/08/18/the-html5-family-web-storage/" class="blank">HTML5ファミリー： Web Storage | Ext Japan Blog</a></li> <li><a href="http://ascii.jp/elem/000/000/557/557064/?mail" class="blank">ASCII.jp：サーバー不要で保存できる「Web Storage」の使い方｜古籏一浩のJavaScriptラボ</a></li> <li><a href="http://blog.livedoor.jp/dankogai/archives/51522584.html" class="blank">404 Blog Not Found:構造化テキストの間違ったエスケープ手法について</a></li> <li><a href="http://jsdo.it/edo_m18/todo" class="blank">ToDo管理アプリ - jsdo.it - Share JavaScript, HTML5 and CSS</a></li> </ul> window.localStorage Test body { background-color: #DDDDDD; font: 12px sans-serif; } window.localStorage の勉強 (function(){ /* XSS 対策 */ // http://blog.livedoor.jp/dankogai/archives/51522584.html を参考にさせて頂きました。ありがとうございます。 function AntiXss() { this.re = new RegExp("(?:https?://[\\x21-\\x7e]+)|(?:[<>&])", 'g'); } AntiXss.prototype = { _makeLink:function(href, text){ var a = document.createElement('a'); a.href = href; a.appendChild(document.createTextNode(text)); var div = document.createElement('div'); div.appendChild(a); return div.innerHTML; }, parseTextRight:function(s){ var scope = this; return s.replace(this.re, function(m0){ if (m0.match(/^[<>&]$/)) { return { '<': '<', '>': '>', '&': '&' }[m0]; }else if(m0.match(/^http/)){ return scope._makeLink(m0, m0); }else{ return m0 } }) } }; var antiXSS = new AntiXss(); // 実行 $(function(){ // window.localStorage の有無 var storage = window.localStorage; if(storage == null){ alert("window.localStorage に対応していません"); return; } /* 初期表示 */ // 表示させるリストを作成 $("#Memo").after('<ol id="List"></ol>'); // 保存されているリストを展開 // 通し番号 null の時は 0 var num = Number(storage.getItem("SoliloquyToal")); for (var i=0; i<num; i++) { var item = storage.getItem("Soliloquy"+i); if(item != null){ setList(i, item); } }; /* イベントハンドラー */ // 投稿 $("#Save").bind("click", function(){ var textdata = $("#Soliloquy").val(); if(textdata == ""){ return; } setList(num, textdata); storage.setItem("Soliloquy"+num, textdata); num++; storage.setItem("SoliloquyToal", num); }); /* イベントハンドラー */ // 全削除 $("#ClearAll").bind("click", function(){ storage.clear(); for (var i=0; i<num; i++) { $("#Clear"+i).unbind("click"); }; $("#List li").remove(); num = 0; }); /* 関数 */ // リストを表示 function setList(n, t){ // XSS 対策 t = antiXSS.parseTextRight(t); // 改行を br へ t = t.replace(/\n|\r/g, "<br>"); $("#List").append('<li><p>' + t + '</p><p><input id="Clear'+n+'" name="Clear'+n+'" value="clear" type="button"></p></li>'); $("#Clear"+n).bind("click", function(){ storage.removeItem("Soliloquy"+n); $(this).unbind("click"); $(this).parents().eq(1).remove(); }); } }); })(); <h1>Soliloquy</h1> <p>window.localStorage を使用したメモアプリのモック</p> <textarea id="Soliloquy" name="Soliloquy" rows="5" cols="50"></textarea><br> <input id="Save" name="Save" value="save" type="button"> <input id="ClearAll" name="ClearAll" value="clear all" type="button"> <h2 id="Memo">メモ</h2> <h2>課題</h2> <ul> <li>キャッシュマニフェストも使う。</li> <li>容量を取得できないか？</li> <li>CSS3 を使ったデザイン/アニメーション</li> <li>保存するデータは、オブジェクトでまとめたほうが良かったかな？</li> </ul> <h2>参考</h2> <ul> <li><a href="http://www.html5.jp/trans/w3c_webstorage.html#storage" class="blank">Web Storage - W3C Editor's Draft 18 August 2009 日本語訳 - HTML5.JP</a></li> <li><a href="http://www.extjs.co.jp/blog/2010/08/18/the-html5-family-web-storage/" class="blank">HTML5ファミリー： Web Storage | Ext Japan Blog</a></li> <li><a href="http://ascii.jp/elem/000/000/557/557064/?mail" class="blank">ASCII.jp：サーバー不要で保存できる「Web Storage」の使い方｜古籏一浩のJavaScriptラボ</a></li> <li><a href="http://blog.livedoor.jp/dankogai/archives/51522584.html" class="blank">404 Blog Not Found:構造化テキストの間違ったエスケープ手法について</a></li> <li><a href="http://jsdo.it/edo_m18/todo" class="blank">ToDo管理アプリ - jsdo.it - Share JavaScript, HTML5 and CSS</a></li> </ul> body { background-color: #DDDDDD; font: 12px sans-serif; } use an iframe compat browser, deer Play on jsdo.it games Share Embed QR Tag Download Complete! Description どんなゲームですか？ window.localStorage の勉強 Control Device スマートフォンコントローラー jsdo.it WebSocket Controller» マウス キーボード タッチデバイス Fullscreen 有効 無効 jsdo.it games から削除する Submit Tweet style Design view Code view code <script type="text/javascript" src="http://jsdo.it/blogparts/kzCI/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/kkeisuke/kzCI" title="window.localStorage Test">window.localStorage Test - jsdo.it - share JavaScript, HTML5 and CSS</a></p> Tweet twitter Favorite by ethertank sentoro GeckoTang Forked sort new page view favorite forked forked: window.localStorage Te.. Hooker.Kuzya.. 00 44views 124/22/1
