HTML5——web存储

1、客户端存储数据的新方法

(1)localStorage方法——没有时间限制的数据存储

(2)sessionStorage方法——针对一个session的数据存储
(a)与cookie做对比:
之前,这些都是由cookie完成的。但是cookie不适合大量数据的存储,因为它们由每个队服务器的请求来传递,这使得cookie速度很慢而且效率也不高。

2、localStorage方法

(1)存储特点:
localStorage方法存储的数据没有时间限制。第二天、第二周或一年之后,数据依然可用。

(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方法针对一个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;
}

你可能感兴趣的:(HTML5——web存储)