Chrome Packaged Apps, storage操作編 2014-06-04

Chrome Packaged Appsのstorage操作などについて。
(Packagedインストール及びデバック方法は省略させて頂きます。)

参考サイト様(公式かも)：
https://developer.chrome.com/apps/about_apps

storage使う例で、local
chrome.storage.local使います。
Packagedは、HTML5のlocalStorageが使えないようで、
移植する場合は、置き換えが必要みたいですね。
*) 非同期I/Oが推奨される為とか。みたいですけど、

ソースこちら、 https://github.com/kuc-arc-f/chrome_store
(jQuery使ってます。)

データ管理用に、
追加、表示、削除のＡ要素おきます。
https://github.com/kuc-arc-f/chrome_store/blob/master/top.html
===============================================
 <a href="#" id="id-a-add" >[ add ]</a><br />
  <br />
  <a href="#" id="id-a-show" >[ show ]</a><br />
  <br />
  <a href="#" id="id-a-delete" >[ delete ]</a><br />
  <hr />
===============================================

追加の処理。
https://github.com/kuc-arc-f/chrome_store/blob/master/top.js
ストレージ名＝strlist
この場合、Ｎ番目の配列にid, text(文字)の各列にデータ埋め込みます。
*) Add数回押すと、Ｎ番目のデータに、
test-0, test-1 などの数値付の文字が格納されます

===============================================

	function click_addStore()
	{
	var ct = mItems.length;
	mItems[ct] = {'id': ct, 'text': 'test-'+ ct };
	chrome.storage.local.set({ 'strlist' : mItems });
	}

view raw c0605-store-top-1.js hosted with ❤ by GitHub

===============================================

表示します。showおす。
storageから値取得して、div要素を書き換えます。
*) 前回表示データは全て削除、
配列データから、全てを再表示します。
===============================================

	function click_showStore()
	{
	$('div#id-div-box').remove();
	var divShow =$('#id-div-diplay');
	var divBox= $('<div id="id-div-box"></div>')
	chrome.storage.local.get( 'strlist' , function(value) {
	if(value && value.strlist) {
	console.log( value.strlist );
	console.log( 'len='+ value.strlist.length );
	var items = value.strlist;
	for(var i=0; i< items.length ; i++){
	var itm = items[i];
	divBox.append('<p>'+ itm.text + '</p><br />');
	}
	divShow.append(divBox);
	}
	});
	}

view raw c0605-store-top-2.js hosted with ❤ by GitHub

===============================================

削除の処理、
この場合、空の配列を。ストレージ名指定で上書きしています。
*)別領域を、各個別に削除したい場合などに使える。かと思います。
===============================================

	function click_deleteStore()
	{
	mItems= new Array();
	chrome.storage.local.set({ 'strlist' : mItems });
	$('div#id-div-box').remove();
	}

view raw c0605-store-top-3.js hosted with ❤ by GitHub

===============================================

値を表示。追加後、[show]押した時、

まとめ（Chrome Packaged Apps 開発メモ）こちら、
http://knaka0209.blogspot.jp/2014/06/chrome-pkg.html

*)
[update: 2014/06/05] Gistにコード一部貼付け修正しました。