第6课 客户端存储概要.ppt

网博课程研发 网博课程研发 网博课程研发 网博课程研发 网博课程研发 网博课程研发 网博课程研发 网博课程研发 第六课：客户端存储 客户端数据存储 Cookie Web Storage 本章目标 出于记录用户特定数据的目的，需要客户端数据存储技术 常用存储机制 Cookie 优点：可与服务器端交互、浏览器自动管理不同站点的数据并发送到服务器端 缺点：安全性受限、数据量受限、可用性受限、明文存储 Web Storage HTML5新增，分为localStorage和sessionStorage 优点：操作简单、不会自动发送到服务器端、存储空间大 缺点：安全性受限、永不过期、不区分站点、明文存储 客户端数据存储 以键值对形式存储，在客户端通过document对象的cookie属性进行操作 Cookie操作 写Cookie 设置指定格式字符串：cookie名=cookie值;expires=失效时间的GMT格式字符串 赋给document对象的cookie属性 如果有多个，则重复上述操作 如果未指定expires，则浏览器关闭cookie就失效 读Cookie 通过document.cookie整体读取，需要进行拆分 先按照“;”拆分为多个键值对 再按照“=”拆分为键和值 Cookie存储 以存储用户名和密码且30天有效为例：var name=“mike”;var pass=“123456”;var exp=new Date();exp.setTime(exp.getTime()+30*24*3600*1000);var str=name=+name+;expires=+exp.toGMTString();document.cookie=str;str=pass=+pass+;expires=+exp.toGMTString();document.cookie=str; Cookie操作：写 读取所有cookie var cks=document.cookie.split(“;”);for (var i = 0; i cks.length; i++) { var kv=cks[i].split(“=”); //kv[0]就是名称,kv[1]就是值} 读取指定名称的cookie：var index=document.cookie.indexOf(key+=);var start=index+key.length+1;var end=document.cookie.indexOf(;,start);if (end==-1) {end=document.cookie.length;}var value=document.cookie.substring(start,end); Cookie操作：读 通常在读写cookie时会进行编码和解码的操作，防止数据出现异常 考虑到值当中可能会出现特殊符号，如”name”=“tom;cruise”，一般在写cookie时会对value进行编码（encodeURIComponent）；读取时对value进行解码（decodeURIComponent） 读写cookie时进行编解码 HTML5引入的一个非常重要的功能，可以在客户端本地存储数据，功能比cookie强大，存储数据量也远大于cookie的4KB，官方建议为每个网站5MB，部分浏览器可支持到10MB甚至更多 包括2个不同类型 sessionStorage：浏览器关闭后数据即失效 localStorage：数据永久有效 Web Storage简介 写 localStorage.变量名=值; 读 var value= localStorage.变量名; 以上用法要求变量名必须符合JS命名规范 Web Storage用法 sessionStorage用法与localStorage相同 写：sessionStorage.name=“mike”;sessionStorage.pass=“123”;localStorage.name=“jerry”;localStorage.pass=“456”; 读：var name_s=sessionStorage.name;var pass_s=sessionStorage.pass;var name_l=localStorage.name;var pass_l=localStorage.pass; 其中name、pass都是自定义的名称，只要符合JavaScript命名规范即可，且无需编解码 操作示例 length：存储的键值对数量 setItem(key,value)：写数据 getItem(key)：根据key读数据 removeItem(key