HTML 5——webストレージ
31211 ワード
1、クライアントがデータを保存する新しい方法
(1)localStorageメソッド-時間制限のないデータストレージ
(2)sessionStorageメソッド--1つのsessionのデータストレージ(a)とクッキーを比較する:これまではクッキーによって行われていた.しかし、クッキーは、各キュー・サーバの要求によって伝達されるため、大量のデータの記憶に適していない.これにより、クッキーは速度が遅く、効率も高くない.
2、localStorage方法
(1)記憶特徴:localStorageメソッドに格納されるデータには時間制限がない.次の日、2週目、または1年後もデータは使用できます.
(2)例:
3、sessionStorage方法
(1)ストレージの特徴:sessionStorageメソッドは1つのsessionに対してデータストレージを行う.ユーザーがブラウザウィンドウを閉じると、データが削除されます.(2)例:
(1)localStorageメソッド-時間制限のないデータストレージ
(2)sessionStorageメソッド--1つのsessionのデータストレージ(a)とクッキーを比較する:これまではクッキーによって行われていた.しかし、クッキーは、各キュー・サーバの要求によって伝達されるため、大量のデータの記憶に適していない.これにより、クッキーは速度が遅く、効率も高くない.
2、localStorage方法
(1)記憶特徴:localStorageメソッドに格納されるデータには時間制限がない.次の日、2週目、または1年後もデータは使用できます.
(2)例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>localStorage</title>
<script src="app.js"></script>
</head>
<body>
<textarea style="width:200px;height:200px;" id="ta"></textarea>
<button id="btn">save</button>
</body>
</html>
var ta;
var btn;
window.onload = function(){
ta = document.getElementById("ta");
if(localStorage.text){
ta.value = localStorage.text;
}
btn = document.getElementById("btn");
btn.onclick = function () {
// alert(ta.value);
localStorage.text = ta.value;
}
}
3、sessionStorage方法
(1)ストレージの特徴:sessionStorageメソッドは1つのsessionに対してデータストレージを行う.ユーザーがブラウザウィンドウを閉じると、データが削除されます.(2)例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sessionIndex</title>
<script src="session.js"></script>
</head>
<body>
<span id="txt">0</span>
<button id="addbtn">Add</button>
</body>
</html>
var num = 0;
var txt;
var btn;
window.onload = function(){
txt = document.getElementById("txt");
btn = document.getElementById("addbtn");
if(sessionStorage.num){
num = sessionStorage.num;
}else{
num = 0;
}
btn.onclick = function () {
num++;
sessionStorage.num = num;
showNum();
}
}
function showNum() {
txt.innerHTML = num;
}