了解Web Storage简介
- 掌握localStorage使用
- 掌握sessionStorage使用
随着互联网的快速发展，基于网页的应用越来越普遍，同时也变得越来越复杂，为了满足日益更新的需求，会经常性的在本地设备上存储数据，例如记录历史活动信息。传统方式使用document.cookie来进行存储，但是由于其存储的空间只有4KB左右，并且需要复杂的操作进行解析，给发开者带来很多不便，为此，HTML5规范提出了本地存储的解决方案。
HTML5的本地存储解决方案中定义了两个重要的API: Web Storage和本地数据库Web SQL Database。本章将重点讲述Web Storage的基本用法。
HTML5的本地存储解决方案中定义了两个重要的API: Web Storage和本地数据库Web SQL Database。本章将重点讲述Web Storage的基本用法。
| window.localStorage对象 | 本地存储 | |
| Web STorage API 两个关键的对象 | ||
| window.sessionStorage对象 | 区域存储 |
. localStorage-用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
localStorage效果：（关闭网站，数据依然存在）
. sessionStorage-用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
sessionStorage效果：
web Storage的特点:
·设置数据和读取数据比较方便
·容量较大，sessionStorage约5M，localStorage约20M
·只能存储字符串，如果要存储JSON对象，可以使用window.JSON的stringify()方法和parse()方法进行序列化和反序列化。
掌握localStorage使用
localStorage对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。
不管是localStorage，还是sessionStorage，可使用的API都相同，Storage接口中提供了一些方法和属性，如下表所示:
| 方法&属性 | 描述 |
| setltem(key,value) | 该方法接收一个键名和值作为参数，将会把键值对添加到存储中，如果键名存在，则更新其对应的值 |
| getltem(key) | 该方法接收一个键名作为参数，返回键名对应的值 |
| romoveltem(key) | 该方法接收一个键名作为参数，并把该键名从存储中删除 |
| length | 类似数组的length属性，用于访问Storage对象中item的数量。 |
| key(n) | 用于访问第n个key的名称 |
| clear() | 清除当前域下的所有localSotrage内容 |
Web Storage开发一个简单的网站列表程序
网站列表程序实现以下功能:
- 可以输入网站名，网址，以网站名作为key存入localStorage;
- 根据网站名，查找网址;
- ·列出当前已保存的所有网站;
- ·以下代码用于保存与查找数据:save()与find()方法
//添加数据
function add() {
var wm = document.getElementById("sitName").value;
var wz = document.getElementById("sitValue").value;
localStorage.setItem(wm, wz);
alert("添加成功！");
}
//查询数据
function search() {
//获取表单中输入的网站名和网址
var key = document.getElementById("key").value;
//alter("添加成功")
document.getElementById("result").innerHTML = "网站名：" + key + "
网址：" + localStorage.getItem(key);
}
