web本地存储研究.docx

Web的本地存储文件编号： 编 制：崔少奇审 核：标 准 化：批 准：京信通信系统（中国）有限公司2016年7月文件历史记录文件编号文件标题Web的本地存储文件履历版次编制日期更改内容（条款）A0XXX2016-7首发目录1前言41.1文档的目的41.2产品范围42Web Storage42.1Web Storage是什么42.2作为简易数据库使用52.3利用storage事件实时监控web Storage中的数据62.4Web Storage的安全性分析62.4.1是否可以取代cookie62.4.2不要存储敏感信息72.4.3严格控制输入输出7前言Web storage存储机制是对cookie的一个改善，包括两类：localStorage和sessionStorage。文档的目的介绍web的web Storage存储机制。产品范围所有平台。Web StorageWeb Storage是什么Web Storage是HTML5引入的一个非常重要的功能，在前端开发中经常用到，可以在客户端本地存储数据，类似HTML4的cookie，但可实现功能要比cookie强大的多，用cookie储存永久数据存在以下几个问题：□大小：限制在4KB。□带宽：cookie是随http事务一起被发送的，因此会浪费一部分发送cookie时使用的带宽。□复杂性：正确操纵cookie是困难的。针对这些问题，在html5中，重新提供了在客户端本地保存数据的功能，他就是web Storage。Web Storage官方建议为每个网站5MB。Web Storage又分为两种：sessionStorage和localStorage。□sessionStorage将数据保存在session对象中。所谓session，是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。Session对象可以用来保存这段时间内所要求保存的任何数据。□localStorage将数据保存在客户端本地的硬件设备（通常指硬盘，也可以是其它硬件设备）中，即使浏览器被关闭了，该数据仍然存在，下次访问网站时可以继续使用。这两者的区别在于前者为临时保存，后者为永久保存。不过数据保存是按不同的浏览器分别进行保存的，也就是说，打开别的浏览器是读取不到这个浏览器中保存的数据的。到目前为止，浏览器支持情况为下图所示：浏览器支持情况判断：常用的方法：□保存数据：localStorage.setItem( key,value ); ? ? ?sessionStorage.setItem( key, value );□?读取数据：localStorage.getItem( key ); ? ??sessionStorage.getItem( key ); ?□?删除单个数据：localStorage.removeItem( key ); ? ??sessionStorage.removeItem( key );□?删除所有数据：localStorage.clear( ); ? ??sessionStorage.clear( );□得到某个索引的key：localStorage.key( index ); ? ??sessionStorage.key( index );两个都有属性 length 表示key 的个数，也即 key 长度：var keyLength1 = localStorage.length; var keyLength2 = sessionStorage.length; 如上，key 和 value 都必须为字符串，换言之，web Storage的API只能操作字符串。在进行读写时，不管是哪个对象，都可以通过对该对象的getItem()方法来读取数据，也可以通过该对象的自定义属性值读取数据；可以通过该对象的setItem()方法保存数据，也可以通过该对象的自定义属性值保存数据。保存数据按照“键名/键值”的形式进行保存。当通过该对象的getItem方法读取数据时，将参数指定为键名，返回键值；当通过该对象的自定义属性值读取数据时，可以将该对象的某个自定义属性名作为键名，访问该自定义属性的属性值即可得到键值；setItem同理。在保存数据时不允许重复保存相同的键名。保存后可以修改键值，但不允许修改键名，只能重新增加键名，然后在保存键值。作为简易数据库使用有几个问题需要考虑。首先，在数据库中，大多数表都分为几列，怎么对列进行管理呢？怎样检索数据呢？如果能解决这些问题就可以将web Storage作为数据库使用。这一次看一个简单的客户信息管理网页实例。客户信息分为姓名、email地址、电话号码、备注这几列，它们保存在localstorag