H5本地存储&新的JS-API
2017-10-12 本文已影响0人
闫子扬
HTML5本地存储：
- 大小最小5MB，可以申请更大的空间
- 不会随HTTP请求发送给服务器
- 非常容易操作
- 移动端普及高
- 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
- document.querySelector('selector');
选择器返回第一个匹配到的元素，如未匹配到返回null。 - document.querySelectorAll('selector');
选择器返回所有匹配到的元素数组，如未匹配到返回空数组。 - document.getElementsByClassName('selector');
选择器返回所有匹配到的元素数组，如未匹配到返回空数组。
classList对象
在html5 api里，页面dom里的每个节点上都有一个classlist对象，程序员可以使用里面的方法新增、删除、修改及判断节点上的css类。
classlist对象里有很多有用的方法：
- length：类名个数
- item：获取类名
- add：添加类
- remove：删除类
- contains：判断类
- toggle：翻转类
