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:翻转类