LocalStorageとCookieによるWEBアプリ TODOメモを作った
LocalStorageとCookieによるWEBアプリ TODOメモ
HTML5 LocalStorageといえば、Cookieのように文字列を保存したり、画像も保存出来たり何かと便利で、さらにCookieに比べて制約が少なく、容量も多いと10MBも保存出来て大変便利なのですが、対応ブラウザはいるかIE8~となっていたり、IEだとデフォルトの設定ではLocalStorageはOffになっていたりとユーザー側の設定 に依存します。
もしもLocalStorage保存可能ならLocalStorage,もしLocalStorageが使えない環境ならCookieに保存するマルチWEBメモ帳アプリが作れないかな、と思ってチャレンジしました。うまくいけばLocalStorageの利用の幅を広げられると思ったからです。
が、結論から言って失敗しました。たまには失敗例も紹介するのも悪くないかなと。
LocalStorageによるTODOメモ
$(function(){
var object = {};
//object.modified = "2012/05/23 Wed";
object.items = new Array();
var data = {};
var date = new Date();
var object = localStorage.getItem('memo') ? JSON.parse(localStorage.getItem('memo')) : { items: []};
object.modified = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
var getStrage = function () {
data.title = $('#title').attr('value');
object.items.push(data);
nativeJSON = JSON.stringify(object);
var nativeJSON = localStorage.setItem('memo',nativeJSON);
location.href=""
}
$("#submit").live('click', getStrage);
$("#main_box").append(function(){
var nativeJSON = localStorage.getItem('memo');
// JSONデータ→JavaScriptオブジェクトに変換
var object = JSON.parse(nativeJSON);
// オブジェクトからデータ取得
var html = "";
for(var idx=0; idx < object.items.length; idx++) {
html = html + "<tr><td class='w230'>" + object.items[idx].title + "</td><td><span class='disp'>削除</span></td></tr>";
}
//ローカルストレージの件数取得
$("#num .txt01").text(object.items.length);
$("#main_box").append(html);
});
var disp = function disp(){
// 「OK」時の処理開始 ＋ 確認ダイアログの表示
if(window.confirm('削除してよろしいですか？')){
var nativeJSON = localStorage.getItem('memo');
// JSONデータ→JavaScriptオブジェクトに変換
var object = JSON.parse(nativeJSON);
var object = localStorage.getItem('memo') ? JSON.parse(localStorage.getItem('memo')) : { items: []};
//更新日時
var date = new Date();
object.modified = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
//何番目？？
var index = $(".disp").index(this);
//クリックされた配列データをspliceで削除
object.items.splice(index,1);
var count = object.items.length;
//削除したら、ふたたびnativeJSONの変数に代入
nativeJSON = JSON.stringify(object);
//対象を削除した状態で再びローカルストレージを保存
localStorage.setItem('memo', nativeJSON);
//保存したら再びストレージを呼び出し
var nativeJSON = localStorage.getItem('memo');
// JSONデータ→JavaScriptオブジェクトに変換
var object = JSON.parse(nativeJSON);
// オブジェクトからデータ取得
var html = "";
// オブジェクトからデータ取得
for(var idx=0; idx < object.items.length; idx++) {
html = html + "<tr><td>" + object.items[idx].title + "</td><td><span class='disp'>削除</span></td></tr>";
}
console.log(html);
$("#main_box").html(html);
}
}
$(".disp").live('click', disp);
});
CookieによるTODOメモ
Cookieの保存についてはjquery.cookie.jsを利用しています。
$(function(){
var object = {};
object.items = new Array();
var data = {};
var date = new Date();
var object = $.cookie("memo") ? JSON.parse($.cookie("memo")) : { items: []};
var getStrage = function () {
data.title = $('#title').attr('value');
object.items.push(data);
nativeJSON = JSON.stringify(object);
$.cookie("memo",nativeJSON,{ expires: 7, path: '/', domain: "kaasan.info"});
location.href="index2.html"
}
$("#submit").live('click', getStrage);
$("#main_box").append(function(){
var nativeJSON = $.cookie("memo");
// JSONデータ→JavaScriptオブジェクトに変換
var object = JSON.parse(nativeJSON);
// オブジェクトからデータ取得
var html = "";
for(var idx=0; idx < object.items.length; idx++) {
html = html + "<tr><td>" + object.items[idx].title + "</td><td><span class='disp'>削除</span></td></tr>";
}
$("#main_box").append(html);
});
var disp = function disp(){
// 「OK」時の処理開始 ＋ 確認ダイアログの表示
if(window.confirm('削除してよろしいですか？')){
var nativeJSON = $.cookie("memo");
// JSONデータ→JavaScriptオブジェクトに変換
var object = JSON.parse(nativeJSON);
// Cookieによる保存
var object = $.cookie("memo") ? JSON.parse($.cookie("memo")) : { items: []};
//更新日時
var date = new Date();
object.modified = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
//何番目？？
var index = $(".disp").index(this);
//クリックされた配列データをspliceで削除
object.items.splice(index,1);
var count = object.items.length;
//削除したら、ふたたびnativeJSONの変数に代入
nativeJSON = JSON.stringify(object);
//対象を削除した状態で再びローカルストレージを保存
$.cookie("memo",nativeJSON,{ expires: 7, path: '/', domain: "kaasan.info"});
//保存したら再びストレージを呼び出し
var nativeJSON = $.cookie("memo");
// JSONデータ→JavaScriptオブジェクトに変換
var object = JSON.parse(nativeJSON);
// オブジェクトからデータ取得
var html = "";
// オブジェクトからデータ取得
for(var idx=0; idx < object.items.length; idx++) {
html = html + "<tr><td>" + object.items[idx].title + "</td><td><span class='disp'>削除</span></td></tr>";
}
console.log(html);
$("#main_box").html(html);
}
}
$(".disp").live('click', disp);
});
どうでしょうか？
基本的にはどちらもJSONデータをLocalStorage、あるいはCookieに保存しているだけなので、保存と呼び出しがやや異なったり、Cookieは保存先のURLや保存期間を指定しているだけの違いでそれぞれのやり方の違いで悩まされることは少ないと思います。
$.cookie("memo",nativeJSON,{ expires: 7, path: ‘/’, domain: "kaasan.info"});
//localStorageによる保存
localStorage.setItem(‘memo’,nativeJSON);
LocalStorage対応か、非対応か
以前こんな記事を書いたことがあるのですが これはあまりよくありませんね。
TRY-Catch構文を使うのがよいようです。
localStorageと書いただけでIE7以下がエラーになってしまいます。IE8以上でもインターネットオプションにDOMストレージを保存する、にチェックが入っていないとうまく保存できません。
そこでTRY-Catch構文でエラーが予測される点をこのようにしました。まるでif文のようですね。
try{
//localStorageが使えるとき
var nativeJSON = localStorage.setItem('memo',nativeJSON);
}catch(e){
//localStorageが使えないとき
var nativeJSON = $.cookie("memo",nativeJSON,{ expires: 7, path: '/', domain: "kaasan.info"});
}
これを利用して書いたのが以下のサンプル。Firefoxや、LocalStorage対応ブラウザでは無事に保存されます。
う～ん、IE7などでは これでいけると思ったのに、うまくいきませんね。
Firefoxで色々LocalStorageを切ってテストしてみたかったのですが、Cookieと一緒になっているようで Localstrageが使えないとCookieも使うことが出来ないようです。
疑問がまだ残るものの、一旦終了。
もし解決できたらこの件についてはまた触れたいと思います。
でも、色々やって思ったのがPCサイトはLocalStorageではやらないで、Cookieでやるのが無難だと思いました。
Cookieは128キロバイト、データ数20までですが、JSONデータにしてしまえば128キロバイト上限まで使うことも可能で、文字に置き換えるとそれなりにたくさんのデータを保存することが可能です。
パソコンリテラシの低い人にインターネットオプションを変更してもらうのは気がひけますし、だったらCookie使ったほうが万人が使えると思います。
まだまだスマホサイトしかLocalStorageは難しいのかな