【面向HTML5--Web Storage】

,
Web项目中的数据存储的方式

(1)业务数据——如商品信息、订单、帖子、新闻、出入账

1)服务器端的数据库中；2)服务器端的内存中；

(2)用户数据——如浏览历史、偏好设定、登录记录

1)Cookie存储：浏览器兼容性好，不能超过4KB，操作复杂2)H5 WebStorage：不能超过8MB，操作简单3)Flash 存储：依赖于Flash播放器4)IndexedDB：目前还不是HTML5标准技术

Web会话：浏览器从第一次打开某个网站的页面开始，然后不停的在此站点中的页面中跳转（很多请求-响应过程），直到最后关闭浏览器——整个过程称为“浏览器与Web服务器间的一次会话”。

WebStorage：H5提供的客户端用户数据存储技术，分为两个对象

1、window.sessionStorage

会话存储，浏览器在自己的进程内存中存储的当前用户的访问数据，可以供当前网站的所有页面使用。一旦会话结束(浏览器关闭)，这些数据全部会被删除。

sessionStorage.setItem(k, v)        //保存k-v对数据sessionStorage[k] = v           //保存k-v对数据var v = sessionStorage.getItem(k)   //获取k对应的vvar v = sessionStorage[ k ]     //获取k对应的vsessionStorage.removeItem(k)    //删除一个k-v对sessionStorage.clear()          //清除所有的k-vsessionStorage.lengthvar k = sessionStorage.key( i ) //获取第i个key

2、window.localStorage

本地存储，跨会话存储，浏览器在当前文件系统中存储的当前用户的访问数据，可以供当前网站的所有页面使用。即使浏览器关闭甚至操作系统重启，这些数据也不会被删除，除非手工删除。

localStorage.setItem(k, v)      //保存k-v对数据localStorage [k] = v                //保存k-v对数据var v = localStorage.getItem(k) //获取k对应的vvar v = localStorage [ k ]          //获取k对应的vlocalStorage.removeItem(k)      //删除一个k-v对localStorage.clear()                //清除所有的k-vlocalStorage.lengthvar k = localStorage.key( i )       //获取第i个key

localStorage中的数据若发生了改变，会触发window.onstorage事件
这里要特别说明一下localStorage的使用也是遵循同源策略的，所以不同的网站直接是不能共用相同的localStorage