开发者学堂课程【HTML5 新特性学习：HTML5 Web 存储】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/396/detail/5052
HTML5 Web 存储
内容介绍：
一、Web 存储
二、示例
一、Web 存储
HTML5 提供了两种在客户端存储数据的新方法:
localStorage -没有时间限制的数据存储
sessionStorage -针对一个 session 的数据存储
之前，这些都是由 cookie 完成的。
但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高
localStorage ：
localStorage 方法存储的数据没有时间限制，一年以后数据仍然可以使用
sessionStorage：
sessionStorage 方法针对一个 session 进行数据存储，当用户关
闭当前浏览器窗口，数据会被删除
二、示例：
创建一个 index 文件，输入
<textarea style = “width: 200px;height: 200px” id= “ta”></textarea>
<button id = “btn”>save</button>
先来进行测试
继续创建一个 <script> 标签
<script>
var ta;
var btn;
window.onload = function(){
ta = document.getElementById(“ta”);
btn = document.getElementById(“btn”);
btn.onclick = function(){
alert(ta.value);
}
}
</script>
进行测试
测试没有问题，接下来通过 localStorage 进行保存
在 ta = document.getElementById(“ta”);下添加一个 if 判断
<script>
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;
}
}
</script>
进行测试
这个地址无论我们什么时候打开，即使完全退出网址，下一次打开仍然存在，这就是 localStorage 的使用
创建一个新文件 index1，输入
<span id = “txt”>0</span>
<button id = “addbtn”>add</button>
添加一个 <script> 标签
<script>
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;
}
</script>
进行测试，点击就可以进行累加