セッションはブラウザをシャットダウンすると値がなくなりますが、
ローカルストレージは再起動しても値が保持されている事を確認してみてください。
Key: 値:
キー | 値 |
---|
<script type="text/javascript">
//ブラウザチェック
if (typeof localStorage == 'undefined') {
document.write("<p>お使いのブラウザではWeb Storageが使えません。</p>");
} else {
//セッションストレージ設定
var storage = localStorage;
//ボタンイベント1 保存
function setlocalStorage() {
var key = document.getElementById("textkey").value;
var value = document.getElementById("textdata").value;
if (key && value) {
storage.setItem(key, value);
}
key = "";
value = "";
viewStorage();
}
//ボタンイベント2 削除
function removeStorage() {
var key = document.getElementById("textkey").value;
storage.removeItem(key);
key = "";
viewStorage();
}
//ボタンイベント3 全て削除
function removeallStorage() {
storage.clear();
viewStorage();
}
//イベント発生時にテーブルにストレージの値を表示
function viewStorage() {
var list = document.getElementById("list")
while (list.firstChild) list.removeChild(list.firstChild);
for (var i=0; i < storage.length; i++) {
var _key = storage.key(i);
var tr = document.createElement("tr");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
list.appendChild(tr);
tr.appendChild(td1);
tr.appendChild(td2);
td1.innerHTML = _key;
td2.innerHTML = storage.getItem(_key);
}
}
//起動時にテーブルにストレージの値を表示
function load() {
var list = document.getElementById("list")
while (list.firstChild) list.removeChild(list.firstChild);
for (var i=0; i < localStorage.length; i++) {
var _key = localStorage.key(i);
var tr = document.createElement("tr");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
list.appendChild(tr);
tr.appendChild(td1);
tr.appendChild(td2);
td1.innerHTML = _key;
td2.innerHTML = localStorage.getItem(_key);
}
}
}
</script>
<h4>入力フィールド</h4>
<p>Key:<input id="textkey" type="text" /> 値:<input id="textdata" type="text" /></p>
<p align="right"> <button id="button" onclick="setlocalStorage()">保存</button>
<button id="button" onclick="removeStorage()">削除</button>
<button id="button" onclick="removeallStorage()">全て削除</button></p>
<h4>入力結果</h4>
<table class="tagForList2">
<tr>
<th>キー</th><th>値</th>
</tr>
<tbody id="list">
</tbody>
</table>
Key: 値:
キー | 値 |
---|
<script type="text/javascript">
//ブラウザチェック
if (typeof sessionStorage == 'undefined') {
document.write("<p>お使いのブラウザではWeb Storageが使えません。</p>");
} else {
//セッションストレージ設定
var storage = sessionStorage;
//ボタンイベント1 保存
function setsessionStorage() {
var key = document.getElementById("textkey").value;
var value = document.getElementById("textdata").value;
if (key && value) {
storage.setItem(key, value);
}
key = "";
value = "";
viewStorage();
}
//ボタンイベント2 削除
function removeStorage() {
var key = document.getElementById("textkey").value;
storage.removeItem(key);
key = "";
viewStorage();
}
//ボタンイベント3 全て削除
function removeallStorage() {
storage.clear();
viewStorage();
}
//テーブルにストレージの値を表示
function viewStorage() {
var list = document.getElementById("list")
while (list.firstChild) list.removeChild(list.firstChild);
for (var i=0; i < storage.length; i++) {
var _key = storage.key(i);
var tr = document.createElement("tr");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
list.appendChild(tr);
tr.appendChild(td1);
tr.appendChild(td2);
td1.innerHTML = _key;
td2.innerHTML = storage.getItem(_key);
}
}
}
</script>
<h4>入力フィールド</h4>
<p>Key:<input id="textkey" type="text" /> 値:<input id="textdata" type="text" /></p>
<p align="right"> <button id="button" onclick="setsessionStorage()">保存</button>
<button id="button" onclick="removeStorage()">削除</button>
<button id="button" onclick="removeallStorage()">全て削除</button></p>
<h4>入力結果</h4>
<table class="tagForList2">
<tr>
<th>キー</th><th>値</th>
</tr>
<tbody id="list">
</tbody>
</table>
データをブラウザ側で保存する機能としては「cookie(クッキー)」が一般的でしたが、「WebStorage」は「cookie」よりも大容量で長期間の保存が可能になっています。
]]> 2種類のWeb StorageWeb Storageにはセッションストレージとローカルストレージの2種類があります。
セッションストレージはウィンドウが開いている間は有効でウインドウが閉じられるとデータは破棄されます。ローカルストレージはウインドウを閉じても有効で自分のPC内に永続的に保存されます。
html5とはhtmlの標準化団体であるw3cが2010年に策定したhtmlのバージョン5の事を指します。
前回のバージョン4は1999年策定なので実に11年ぶりのメジャーアップになり、html5は2008年に草案が発表され現在、各種ブラウザに取り入れられ始めています。
今すぐhtml5にしないといけないという訳ではありませんが、将来の検索エンジン対策や周辺サイトがhtml5への変更が進む中、覚える必要がある言語といえるでしょう。
]]>
html5の特徴
html5の特徴は多数ありますが、その中でも構造化タグと動画編集タグの追加が大きな特徴です。
アップルがflashを採用しない事により、audio,videoタグ、また各種API機能が注目されていて、近い将来大きく広まると推測されています。
html5は広義な意味だとcss3とセットにされる事もありますが当サイトではhtml5タグとAPIに限定してhtml5を取り扱っています。css3タグを使わない純粋なhtml5のみを使用したシンプルテンプレートも用意しましたので、そちらも参考にしてください。
]]>
<canvas id="canvassample1" width="140" height="140"></canvas>
<script type="text/javascript">
onload = function() {
draw1();
};
function draw1() {
var canvas = document.getElementById('canvassample1');
if ( ! canvas || ! canvas.getContext ) {
return false;
}
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(120, 20);
ctx.lineTo(120, 120);
ctx.lineTo(20, 120);
ctx.closePath();
ctx.stroke();
}
</script>