Goldilocks Days: WebStorageを試す

・WebStorageとは

WebStorageはHTML5に加えられたWebデータをローカルに保存される機能です。
簡単に言うとcookieでは使いづらかった点を改良したものと言えます。
例えば、cookieには出来なかった大きなデータを保存したりページごとにセッションを持つことが出来たりします。

・対応ブラウザ

Internet Explorerは8からFirefoxは3.5から対応しています。最新のブラウザであれば多くは対応しています。

・WebStorageの種類

WebStorageにはsessionStorageとlocalStorageが存在します。
sessionStorageはブラウザがセッションを保持するために使わる揮発性のデータです。
localStorageはローカル側に期限なしでcookieでは実現できなかった大量のデータを保存できます。
つまりローカルに大きなデータを長期保存出来ることによりいままで制限上出来なかったことができるようになります。
これらとcanvasなどを機能を利用してサーバの負荷を抑えながらリッチな表現力を保持できたりします。

・localStorageとは

localStorageの機能は非常に簡単です。
保存、読み出し、削除などごくごく少数のメソッドを使用するだけです。

・保存データの形式

localStorageのデータはキー・バリュー型で保存されます。
これはハッシュや連想配列でおなじみですね。JavaScriptではオブジェクトでもあります。

保存方法は

window.localStorage.setItem(データ名, データ値);
window.localStorage.データ名 = データ値;
windwo.localStorage[データ名] = データ値;

のいずれかで保存されます。

読み出し方法は

データ値 = window.localStorage.getItem(データ名);
データ値 = window.localStorage.データ名;
データ値 = windwo.localStorage[データ名];

で全く違和感ないですね。

削除方法は

window.localStorage.removeItem(データ名);

です。

全件削除は

window.localStorage.clear();

です。
これで同じドメインのすべてのデータが削除されます。(別のドメインのものは残ります。)

ではフォームデータを保存する簡単な例を書きます

view plain print ?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>HTML5</title>
<script>
<!--
var data, save, load, mess, disp;
window.onload = function() {
data = document.getElementById("data");
save = document.getElementById("save");
load = document.getElementById("load");
mess = document.getElementById("message");
disp = document.getElementById("disp");
save.onclick = function(){
setData(data.value);
}
load.onclick = getData;
}
function setData(value) {
if(!window.localStorage) {
return false;
}
if(value == "") {
mess.innerHTML = "データがありません";
return false;
}
window.localStorage.setItem("data", value);
mess.innerHTML = "保存しました";
}
function getData() {
if(!window.localStorage) {
return false;
}
var result = window.localStorage.getItem("data");
if(!result) {
disp.innerHTML = "データが保存されていません";
}else {
disp.innerHTML = result;
}
}
//-->
</script>
<style>
#message {
color: red;
}
</style>
</head>
<body>
<h1>WebStorage</h1>
<form action="#">
<label for="data">データ: </label>
<input type="text" name="data" id="data">
<input type="button" value="保存" id="save">
<input type="button" value="読み込み" id="load">
</form>
<div id="message"></div>
<div id="disp"></div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8"/>
 <title>HTML5</title>
<script>
<!--

var data, save, load, mess, disp;

window.onload = function() {
 data = document.getElementById("data");
 save = document.getElementById("save");
 load = document.getElementById("load");
 mess = document.getElementById("message");
 disp = document.getElementById("disp");
 
 save.onclick = function(){
  setData(data.value);
 }
 load.onclick = getData;
}

function setData(value) {
 if(!window.localStorage) {
  return false;
 }
 if(value == "") {
  mess.innerHTML = "データがありません";
  return false;
 }
 window.localStorage.setItem("data", value);
 mess.innerHTML = "保存しました";
}

function getData() {
 if(!window.localStorage) {
  return false;
 }
 var result = window.localStorage.getItem("data");
 if(!result) {
  disp.innerHTML = "データが保存されていません";
 }else {
  disp.innerHTML = result;
 }
}
 
//--> 
</script>
<style>

#message {
 color: red;
}

</style>
</head>
<body> 
<h1>WebStorage</h1> 
 <form action="#">
  <label for="data">データ: </label>
  <input type="text" name="data" id="data">
  <br>
  <input type="button" value="保存" id="save">
  <input type="button" value="読み込み" id="load">
 </form>
 <div id="message"></div>
 <div id="disp"></div>
</body>
</html>

Goldilocks Days

2011年5月28日土曜日

WebStorageを試す

0 件のコメント:

コメントを投稿

Pythonで地図空間データを扱う⑤