H5本地存储&新的JS-API

HTML5本地存储：

1. 大小最小5MB，可以申请更大的空间
2. 不会随HTTP请求发送给服务器
3. 非常容易操作
4. 移动端普及高
5. localStorage与sessionStorage两种

localStorage为永久保存数据，不会随着浏览器关闭而消失，可以在同域名跨页访问。
按域名进行存储，不会和其他域名冲突
按键值对存储：key/value

setItem(key,value)，保存或设置数据，如果key已经存在，则覆盖key对应的value，如果不存在则添加key与value。
getItem(key)；获取key对应的value。 如果key不存在则返回null。
key(index)；获取指定下标位置的key
localStorage.key(0);
length获取localStorage一共有多少条数据，配合key(index)方法可以实现遍历localStorage数据的方法

clear();将同域名下的所有localStorage数据都清空。
localStorage.clear();

removeItem('key');删除数据，通过key来删除相应的value。

storage事件：当同源的localStorage或sessionStorage有更改以后，会触发这个事件。

• property Description
• key 被增加、修改、删除数据的key
• oldValue 数据被修改之前的value，如果数据是被增加的则为null
• newValue 数据被修改之后的value
• url 修改storage页面的url

sessionStorage为临时性保存数据，当页面关闭就会消失。其他一切与localStorage一样
sessionStorage不能夸页面访问，也不会触发跨标签页的storage事件，他只局限在当前的标签页。

H5-JS-API

1. document.querySelector('selector');
   选择器返回第一个匹配到的元素，如未匹配到返回null。
2. document.querySelectorAll('selector');
   选择器返回所有匹配到的元素数组，如未匹配到返回空数组。
3. document.getElementsByClassName('selector');
   选择器返回所有匹配到的元素数组，如未匹配到返回空数组。

classList对象
在html5 api里，页面dom里的每个节点上都有一个classlist对象，程序员可以使用里面的方法新增、删除、修改及判断节点上的css类。
classlist对象里有很多有用的方法：

• length：类名个数
• item：获取类名
• add：添加类
• remove：删除类
• contains：判断类
• toggle：翻转类

扩展学习：http://sentsin.com/web/190.html