HTML 5-ローカルストレージWeb Storage
56416 ワード
Web Storage機能は、その名の通り、Web上でクライアントに対してローカルにデータを格納する機能であり、具体的にはWeb Storageは2つに分けられる.sessionStorage:sessionオブジェクトにデータを保存します.sessionとは、ユーザーがあるサイトを閲覧する際に、サイトにアクセスしてからブラウザが閉じるまでの時間、つまりユーザーがこのサイトを閲覧するのにかかる時間です.sessionオブジェクトは、この間に保存する必要があるデータを保存するために使用できます.localStorage:クライアントのローカルハードウェアデバイス(通常はハードディスクを指し、もちろん他のハードウェアデバイスであってもよい)にデータを保存します.つまり、ブラウザが閉じられてもデータは存在し、次回ブラウザを開いてWebサイトにアクセスするときも使用できます.sessionStorageとlocalStorageの違い:この2つの違いは、sessionStorageが一時保存であり、localStorageが永久保存であることです.
次に一緒に見てみましょう.
SessionStorage:sessionオブジェクトにデータを保存します.sessionとは、ユーザーがWebサイトを閲覧するときに、Webサイトにアクセスしてからブラウザが閉じるまでの時間のセッションです.つまり、ユーザーがこのサイトを閲覧するのにかかる時間がsessionのライフサイクルです.sessionオブジェクトは、この間に保存する必要があるデータを保存するために使用できます.このオブジェクトには主に2つの方法があります.データの保存:sessionStorage.setItem(Key, value); データの読み込み:sessionStorage.getItem(Key); Key:保存するキーの名前を表します.この名前は勝手に命名することができ、変数の意味で理解することができます.Value:値を表します.つまり、Keyに格納する値です.変数によって値を割り当てることで理解できます.使用方法:データの保存:sessionStorage.setItem("website", "W3Cfuns.com"); データの読み込み:sessionStorage.getItem("website");
コードケース:
LocalStorage:使用方法はSessionStorageと同じです.このオブジェクトには主に2つの方法があります.データの保存:localStorage.setItem(Key, value); データの読み込み:localStorage.getItem(Key); Key:保存するキーの名前を表します.この名前は勝手に命名することができ、変数の意味で理解することができます.Value:値を表します.つまり、Keyに格納する値です.変数によって値を割り当てることで理解できます.使用方法:データの保存:localStorage.setItem("website", "W3Cfuns.com"); データの読み込み:localStorage.getItem("website"); ケースは次のとおりです.
posted@2012-06-20 20:56↑霧夜飛鷹↓読書(45)コメント(0)
編集
HTML 5--JS API-新しいセレクタ
新しいセレクタquerySelector("selector"); selector:CSSセレクタに従って最初に一致した要素を返し、一致しなかった場合nullを返します.サポート:Chrome 4.0+、FireFox 3.5+、Safari 3.2+、Opera 10.1+、IE 8+document.querySelectorAll("selector"); selector:CSSセレクタに基づいて一致するすべての要素配列を返し、一致しない場合は空の配列を返します.サポート:Chrome 4.0+、FireFox 3.5+、Safari 3.2+、Opera 10.1+、IE 8+document.getElementsByClassName("selector"); selector:クラスセレクタに基づいて一致するすべての要素配列を返し、一致しない場合は空の配列を返します.サポート:Chrome 4.0+,FireFox 3.0+,Safari 3.2+,Opera 10.1+,IE 8+
ケースは次のとおりです.HTML構造は次のとおりです.
1、最初のli要素を取得するには、document.querySelector(".content ul li"); 2、li要素をすべて取得するには、document.querySelectorAll(".content ul li"); 3、classがw 3 cのli要素をすべて取得するには、document.getElementsByClassName("w3c");
posted@2012-06-20 20:44↑霧夜飛鷹↓読書(26)コメント(0)
編集
次に一緒に見てみましょう.
SessionStorage:sessionオブジェクトにデータを保存します.sessionとは、ユーザーがWebサイトを閲覧するときに、Webサイトにアクセスしてからブラウザが閉じるまでの時間のセッションです.つまり、ユーザーがこのサイトを閲覧するのにかかる時間がsessionのライフサイクルです.sessionオブジェクトは、この間に保存する必要があるデータを保存するために使用できます.このオブジェクトには主に2つの方法があります.データの保存:sessionStorage.setItem(Key, value); データの読み込み:sessionStorage.getItem(Key); Key:保存するキーの名前を表します.この名前は勝手に命名することができ、変数の意味で理解することができます.Value:値を表します.つまり、Keyに格納する値です.変数によって値を割り当てることで理解できます.使用方法:データの保存:sessionStorage.setItem("website", "W3Cfuns.com"); データの読み込み:sessionStorage.getItem("website");
コードケース:
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <meta charset="gb2312">
5 <title>HTML5-- SessionStorage</title>
6 <script type="text/javascript">
7 window.onload = function()
8 {
9 alert(" ，sessionStorage ， ，
， ， 。\r
，sessionStorage ， ， 。")
10
11 // body 3 input
12 var msg = document.getElementById("msg");
13 var getData = document.getElementById("getData");
14 var setData = document.getElementById("setData");
15
16 setData.onclick = function()//
17 {
18 if(msg.value)
19 {
20 sessionStorage.setItem("data", msg.value);
21 alert(" data ");
22 }
23 else
24 {
25 alert(" ");
26 }
27 }
28
29 getData.onclick = function()//
30 {
31 var msg = sessionStorage.getItem("data");
32 if(msg)
33 {
34 alert("data ：" + msg);
35 }
36 else
37 {
38 alert("data ！");
39 }
40 }
41 }
42 </script>
43 </head>
44
45 <body>
46 <input id="msg" type="text"/>
47 <input id="setData" type="button" value=" "/>
48 <input id="getData" type="button" value=" "/>
49 </body>
50 </html>LocalStorage:使用方法はSessionStorageと同じです.このオブジェクトには主に2つの方法があります.データの保存:localStorage.setItem(Key, value); データの読み込み:localStorage.getItem(Key); Key:保存するキーの名前を表します.この名前は勝手に命名することができ、変数の意味で理解することができます.Value:値を表します.つまり、Keyに格納する値です.変数によって値を割り当てることで理解できます.使用方法:データの保存:localStorage.setItem("website", "W3Cfuns.com"); データの読み込み:localStorage.getItem("website"); ケースは次のとおりです.
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <meta charset="gb2312">
5 <title>HTML5-- LocalStorage</title>
6 <script type="text/javascript">
7 window.onload = function()
8 {
9 alert(" ，localStorage ， ， ，
。")
10
11 // body 3 input
12 var msg = document.getElementById("msg");
13 var getData = document.getElementById("getData");
14 var setData = document.getElementById("setData");
15
16 setData.onclick = function()//
17 {
18 if(msg.value)
19 {
20 localStorage.setItem("data", msg.value);
21 alert(" data ");
22 }
23 else
24 {
25 alert(" ");
26 }
27 }
28
29 getData.onclick = function()//
30 {
31 var msg = localStorage.getItem("data");
32 if(msg)
33 {
34 alert("data ：" + msg);
35 }
36 else
37 {
38 alert("data ！");
39 }
40 }
41 }
42 </script>
43 </head>
44
45 <body>
46 <input id="msg" type="text"/>
47 <input id="setData" type="button" value=" "/>
48 <input id="getData" type="button" value=" "/>
49 </body>
50 </html>posted@2012-06-20 20:56↑霧夜飛鷹↓読書(45)コメント(0)
編集
HTML 5--JS API-新しいセレクタ
新しいセレクタquerySelector("selector"); selector:CSSセレクタに従って最初に一致した要素を返し、一致しなかった場合nullを返します.サポート:Chrome 4.0+、FireFox 3.5+、Safari 3.2+、Opera 10.1+、IE 8+document.querySelectorAll("selector"); selector:CSSセレクタに基づいて一致するすべての要素配列を返し、一致しない場合は空の配列を返します.サポート:Chrome 4.0+、FireFox 3.5+、Safari 3.2+、Opera 10.1+、IE 8+document.getElementsByClassName("selector"); selector:クラスセレクタに基づいて一致するすべての要素配列を返し、一致しない場合は空の配列を返します.サポート:Chrome 4.0+,FireFox 3.0+,Safari 3.2+,Opera 10.1+,IE 8+
ケースは次のとおりです.HTML構造は次のとおりです.
1 <div class="content">
2 <ul>
3 <li> </li>
4
5 <li class="exp"> </li>
6
7 <li class="exp"> </li>
8
9 <li class="exp"> </li>
10
11 <li> </li>
12
13 </ul>
14
15 </div>1、最初のli要素を取得するには、document.querySelector(".content ul li"); 2、li要素をすべて取得するには、document.querySelectorAll(".content ul li"); 3、classがw 3 cのli要素をすべて取得するには、document.getElementsByClassName("w3c");
posted@2012-06-20 20:44↑霧夜飛鷹↓読書(26)コメント(0)
編集