H5的本地存储

H5的本地存储

本地存储：通过浏览器访问服务器的时候，一部分数据存在服务器，一部分数据存在浏览器，存在浏览器时，我们就用到了本地存储，也就是客服端数据的存储；

本地存储可以使用在哪里？
比如用户的临时登录信息，用户页面配置，当前临时信息；一些东西用户想要存起来，方面下次访问时继续使用，但是服务器没有必要浪费空间来存储这些信息，此时就可以应用本地存储，存放在用户本地

本地存储的方式：

cookie：最多只能存储4kb大小的数据，每次http请求都会被传回服务器；在其设置的过期时间之前有效；在所有同源窗口可以共享；

web storage：最多存储5mb大小的数据，key-value的方式存储数据，包含两种方式：local storage 和 session storage 两者的区别在于存储数据的时间，前者在浏览器关闭时不会被清空，除非手动清除；后者在浏览器关闭也就是会话结束时数据自动消失；

API：

storage.length 只读 ：返回一个整数，表示存了多少条数据

storage.key(n) n作为参数，返回第n个键名

storage.getItem() 接受一个键名作为参数，返回键名对应的值

storage.setItem() 接受一个键名和值作为参数，把此键名和值添加到存储当中，如果键名已经存在，更新键名的值

storage.removeItem() 接受键名参数，删除此项数据

storage.clear() 清除存储中的所有数据

web storage 存储的数据不能跨浏览器；不能跨域；还支持事件同之机制，可以将数据更新的通知发送给监听者；

localstorage可以在同一个域下多个页面使用；sessionstorage只能在同一个域下的同一个页面使用

web storage的好处：
1、将数据保存在本地，减少不必要的网络请求

2、快速显示数据：从本地获取数据比通过网络从服务器获取数据，速度更快，效率更高，页面显示也更快；

3、不影响网络效能：因为webstorage的数据只存储在客户端的浏览器，不会占用频带