こんにちは、
前々回はcanvas、
Web Storage
Web Storageはブラウザ上で動作するキーバリューストアです。JavaScriptからデータを保存、
というのも、
なお、
では、
localStorage.test1 = 'サンプル';
console.log(localStorage.test1) // サンプル
console.log(localStorage.length) // 1
localStorage.setItem('test2', 'サンプル2');
console.log(localStorage.getItem('test1'));
for (var i = 0;i < localStorage.length;i++){
console.log(localStorage.key(i)) // test2 , test1
}
Object.keys(localStorage).forEach(function(key){
console.log(localStorage.getItem(key));
// サンプル2, サンプル
});
localStorage.removeItem('test1');
// もしくは delete localStorage.test1
console.log(localStorage.test1) // undefined
localStorage.clear();setItem、
また、
window.addEventListener('storage',function(event){
console.log(event);
console.log(event.oldValue);
console.log(event.newValue);
console.log(event.storageArea === localStorage); // true
},false);
localStorage.test1 = 'サンプル';localStorageはChrome拡張において、
var Config = {
name:'sample',
status:true,
count:0
};
if (localStorage.Config) {
Config = JSON.parse(localStorage.Config);
} else {
localStorage.Config = JSON.stringify(Config);
}Background Pageなどにおいて、
このとき、
ただし、
さて、
(function(){
if (!this.localStorage || this.Storage) return;
var Storage = this.Storage = {
get_data:function(key){
var val = localStorage.getItem(key);
if (val) {
return JSON.parse(val);
}
return null;
},
get:function(key){
var data = Storage.get_data(key);
if (data.expire) {
var expire = new Date(data.expire);
if (expire.getTime() > new Date().getTime()) {
return data.value;
} else {
localStorage.removeItem(key);
}
} else {
return data.value;
}
return null;
},
has:function(key){
if (!localStorage.hasOwnProperty(key)) {
return false;
}
var data = Storage.get_data(key);
if (data.expire) {
var expire = new Date(data.expire);
if (expire.getTime() > new Date().getTime()) {
return true;
} else {
localStorage.removeItem(key);
}
} else {
return true;
}
return false;
},
set:function(key, value, expire){
var data = {value:value};
if (expire) {
if (expire instanceof Date) {
data.expire = expire.toString();
} else {
var time = new Date();
time.setTime(time.getTime() + expire);
data.expire = time.toString();
}
}
localStorage.setItem(key, JSON.stringify(data));
}
};
})();こちらは以下のように扱えます。これで、
var data= [{},{}];
if (Storage.has('data')) {
data = Storage.get('data');
} else {
Storage.set('data', data, 7 * 24 * 60 * 60 * 1000);
}Desktop Notifications
Chrome 4では、
拡張からDesktop Notificationsを使用するためには、
まず、
{
"description": "Sample Notify",
"name": "Sample Notify",
"background_page": "background.html",
"browser_action": {
"default_title": "Show Notification",
"default_icon": "icon.png"
},
"version": "0.0.3",
"permissions": [
"notifications"
]
}続いて、
<!DOCTYPE html>
<html>
<head>
<script>
var list = [
'chrome-extension://' + location.host + '/note.html',
'http://www.google.co.jp/'
];
var notify = webkitNotifications;
chrome.browserAction.onClicked.addListener(function(tab){
var url = list.shift();
if (url) {
var note = notify.createHTMLNotification(url);
//or notify.createNotification(iconUrl,title,body);
note.show();
}
});
chrome.extension.onRequest.addListener(function(res){
console.log(res);
});
</script>
</head>
<body>
</body>
</html>note.
<button onclick="chrome.extension.sendRequest('click');">
button
</button>最後に、
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>webkitNotifications sample</title>
<body>
<button id="requestPermission">デスクトップへの通知</button>
<script>
document.querySelector('#requestPermission').
addEventListener('click',function(){
var n, wn = webkitNotifications;
wn.requestPermission(function(){
n = wn.createNotification('icon.png','title','body');
n.show();
});
},false);
</script>
</body>
</html>なお、
まとめ
今回はWeb StorageとJSON関連のチップスに、