今回使うAPIの
chrome.storage.localは、設定などの小さなデータから大きめのデータまで、とても簡単に扱える便利なchrome実装です。下の簡単なサンプルを見れば、その使い方はすぐに理解できるでしょう。
サンプルプロジェクトのファイル構成
- manifest.json
- main.html
- background.js
- app.js
- 128.png
まずはmanifest.jsonから見てみましょう。
{
"name": "WebStorage Test App",
"description": "WebStorage sample app",
"version": "0.1",
"app": {
"background": {
"scripts": ["background.js"]
}
},
"icons": { "128": "128.png" },
"permissions": [
"storage",
"unlimitedStorage"
]
}permissionsの所が重要です。localStorageを使う時はstorageを許可します。5MB以上のデータを扱いたい場合は、unlimitedStorageも許可しておきましょう。次は画面です。
main.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <h3>chrome.storage.local</h3> txt1:<input type="text" id="txt1"></input><br> txt2:<input type="text" id="txt2"></input><br> <button id="save_btn">save</button> <button id="load_btn">load</button> <button id="remove_btn">remove</button> <button id="clear_btn">clear</button> </body> <script src="app.js"></script> </html>
そしてbackground.js
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('main.html', {
'bounds': {
'width': 400,
'height': 500
}
});
});最後にお待ちかね、app.js
// コントロールのDOM取得
var txt1 = document.querySelector('#txt1');
var txt2 = document.querySelector('#txt2');
var save_btn = document.querySelector('#save_btn');
var load_btn = document.querySelector('#load_btn');
var remove_btn = document.querySelector('#remove_btn');
var clear_btn = document.querySelector('#clear_btn');
/**
* saveボタンクリック
*/
save_btn.onclick = function(e){
var item = {
'txt1': txt1.value,
'txt2': txt2.value
};
// localStorageへ保存
chrome.storage.local.set(item, function(){
console.log('item saved.');
});
}
/**
* loadボタンクリック
*/
load_btn.onclick = function(e){
var keys = [ 'txt1', 'txt2' ];
// localStorageから読込
chrome.storage.local.get(keys, function(item){
console.log('txt1: ' + item.txt1 + ', txt2: ' + item.txt2);
});
}
/**
* removeボタンクリック
*/
remove_btn.onclick = function(e){
var keys = [ 'txt1', 'txt2' ];
// localStorageから削除
chrome.storage.local.remove(keys, function(){
console.log('item removed.');
});
}
/**
* clearボタンクリック
*/
clear_btn.onclick = function(e){
// localStorageをクリア
chrome.storage.local.clear(function(e){
console.log("localStorage cleared.");
});
}
/**
* onChangedリスナ登録
*/
chrome.storage.onChanged.addListener(function(changes, namespace) {
for (key in changes) {
var storageChange = changes[key];
console.log('key "%s" in namespace "%s" changed. ' +
'Old value was "%s", new value is "%s".',
key,
namespace,
storageChange.oldValue,
storageChange.newValue);
}
});ソースコードは以上です。
では、これを実行してみましょう。
まず、画面の二つのテキストエリア txt1 と txt2 に、それぞれ "hoge", "moge" を入力してsaveボタンを押してみます。
すると次のようにログ表示されます。
key "txt1" in namespace "local" changed. Old value was "undefined", new value is "hoge". app.js:50 key "txt2" in namespace "local" changed. Old value was "undefined", new value is "moge". app.js:50 item saved.これでlocalStorageにデータ(txt1:"hoge", txt2:"moge")が保存されました。
"item saved." の直前にonChangedイベントが呼び出されていることがわかります。
次にloadボタンを押して、先ほど保存したデータを呼び出してみます。
txt1: hoge, txt2: moge app.js:29先ほど保存されたデータがログ出力されています。
次はtxt2の値を "foo" に変えて保存してみます。
key "txt2" in namespace "local" changed. Old value was "moge", new value is "foo". app.js:50 item saved.txt2の値が変更される直前にonChangedイベントが呼び出されたことがわかります。今回はtxt2しか変更していないのでログもtxt2の変更分だけです。
もう一度loadボタンを押してみると、
txt1: hoge, txt2: foo app.js:29ちゃんとtxt2の値が変更されていますね。
今度はremoveボタンを押して二つの値を削除してみましょう。
key "txt1" in namespace "local" changed. Old value was "hoge", new value is "undefined". app.js:50 key "txt2" in namespace "local" changed. Old value was "foo", new value is "undefined". app.js:50 item removed. app.js:40ここでも削除が実行される直前にonChangedイベントが呼ばれています。
最後にもう一度loadボタンを押して確認してみると、
txt1: undefined, txt2: undefined app.js:29ちゃんと削除されていますね。
chrome.storageの使い所
chrome.storage.localはアプリの設定などのちょっとしたデータ保存には威力を発揮すると思います。また、データを頻繁に更新するようなアプリのデータ保存にも、unlimitedStorageなlocalStorageを使えば大概事足りそうです。クラウド(Google Drive)と同期できる
chrome.storage.syncもかなり便利です。APIはlocalのと殆ど同じですから学習コストもゼロです。ただ、書き込み頻度の制約が厳しいのでデータ更新頻度の高いアプリにはおすすめできません。参考にしたサイト
chrome.storage - Google ChromeChromeのStorageモジュールで大規模データを扱う - monoの開発ブログ
0 件のコメント:
コメントを投稿