[html]学習ノート--Webストレージ
10757 ワード
HTML 5は、クライアントがデータを格納する2つの新しい方法を提供し、これらはクッキーによって完了する.しかし、cookieは、サーバに対する要求ごとに伝達されるため、大量のデータの記憶に適していない.これにより、cookieは速度が遅く、効率も高くない.クッキーには時間限定があり、設定をカスタマイズできます.
1、クライアントがデータを保存する新しい方法
1)localStorage-時間制限のないデータストア
2)sessionStorage-1つのsessionのデータストレージに対して、ブラウザが閉じると、データが消去されます.
2、Webストレージ-localStorage
1)ストレージの特徴:localStorageに格納されているデータは時間制限がなく、翌日、翌週または1年後もデータは使用できます.
テキストボックスに入力した値を実現し、ページをリフレッシュしても消えません.
ここで使用するapp.js:
ブラウザでhtmlファイルに表示されるページ---レビュー要素---Resources---Local Storageを開くと、キャッシュされた内容が表示されます.
3、Webストレージ-sessionStorageの使用
ここで使用するapp.js:
1、クライアントがデータを保存する新しい方法
1)localStorage-時間制限のないデータストア
2)sessionStorage-1つのsessionのデータストレージに対して、ブラウザが閉じると、データが消去されます.
2、Webストレージ-localStorage
1)ストレージの特徴:localStorageに格納されているデータは時間制限がなく、翌日、翌週または1年後もデータは使用できます.
テキストボックスに入力した値を実現し、ページをリフレッシュしても消えません.
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="utf-8">
5 <title></title>
6 <script src = "app.js"></script>
7 </head>
8 <body>
9 <textarea style="width:200px;height: 200px" id="ta"></textarea>
10 <button id="btn">save</button>
11 </body>
12 </html>ここで使用するapp.js:
1 var ta;
2 var btn;
3 window.onload = function(){
4 ta = document.getElementById("ta");
5 if(localStorage.text){
6 ta.value = localStorage.text;
7 }
8 btn = document.getElementById("btn");
9
10 btn.onclick = function(){
11 localStorage.text = ta.value;
12 // alert(ta.value);
13 }
14 }ブラウザでhtmlファイルに表示されるページ---レビュー要素---Resources---Local Storageを開くと、キャッシュされた内容が表示されます.
3、Webストレージ-sessionStorageの使用
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="utf-8">
5 <title></title>
6 <script src="app.js"></script>
7 </head>
8 <body>
9 <span id="txt">0</span>
10 <button id="addbtn">add</button>
11 </body>
12 </html>ここで使用するapp.js:
1 var num = 0;
2 var txt;
3 var btn;
4
5 window.onload = function(){
6 txt = document.getElementById("txt");
7 btn = document.getElementById("addbtn");
8 if(sessionStorage.num){
9 num = sessionStorage.num;
10 }else{
11 num=0;
12 }
13
14 btn.onclick = function () {
15 num++;
16 sessionStorage.num = num;
17 showNum();
18 }
19 }
20
21 function showNum(){
22 txt.innerHTML = num;
23 }