两天前 领导安排 让在客服谈天做一个谈天记录本地保存 类似于QQ JD客服 等 后来综合考虑利用 localStorage 处理 完成后 做一下总结。
正文
1. 各种存储方案的大略比拟
UserData仅IE支持， Google Gears SQLite须要插件，Flash已经伴随着HTML5的涌现逐渐退出了历史舞台，因此本日我们的主角只有他们三个：Cookie,LocalStorge,SesstionStorge;
2. Cookie
作为一个前端和Cookie打交道的次数肯定不会少了，Cookie算是比较古老的技能了
1993 年，网景公司雇员 Lou Montulli 为了让用户在访问某网站时，进一步提高访问速率，同时也为了进一步实现个人化网络，发明了本日广泛利用的 Cookie。
2.1 Cookie的特点
我们先来看下Cookie的特点：
1）cookie的大小受限定，cookie大小被限定在4KB，不能接管像大文件或邮件那样的大数据。2）只要有要求涉及cookie，cookie就要在做事器和浏览器之间来回传送（这阐明为什么本地文件不能测试cookie）。而且cookie数据始终在同源的http要求中携带（纵然不须要），这也是Cookie不能太大的主要缘故原由。正统的cookie分发是通过扩展HTTP协议来实现的，做事器通过在HTTP的相应头中加上一行分外的指示以提示浏览器按照指示天生相应的cookie。3）用户每要求一次做事器数据，cookie则会随着这些要求发送到做事器，做事器脚本措辞如PHP等能够处理cookie发送的数据，可以说是非常方便的。当然前端也是可以天生Cookie的，用js对cookie的操作相称的繁琐，浏览器只供应document.cookie这样一个工具，对cookie的赋值，获取都比较麻烦。而在PHP中，我们可以通过setcookie()来设置cookie，通过$_COOKIE这个超全局数组来获取cookie。cookie的内容紧张包括：名字，值，过期韶光，路径和域。路径与域一起构成cookie的浸染范围。若不设置过期韶光，则表示这个cookie的生命期为浏览器会话期间，关闭浏览器窗口，cookie就消逝。这种生命期为浏览器会话期的cookie被称为会话cookie。会话cookie一样平常不存储在硬盘上而是保存在内存里，当然这种行为并不是规范规定的。若设置了过期韶光，浏览器就会把cookie保存到硬盘上，关闭后再次打开浏览器，这些cookie仍旧有效直到超过设定的过期韶光。存储在硬盘上的cookie可以在不同的浏览器进程间共享，比如两个IE窗口。而对付保存在内存里的cookie，不同的浏览器有不同的处理办法。
2.2 Session
说到Cookie就不能不说Session。
Session机制。session机制是一种做事器真个机制，做事器利用一种类似于散列表的构造（也可能便是利用散列表）来保存信息。当程序须要为某个客户真个要求创建一个session时，做事器首先检讨这个客户真个要求里是否已包含了一个session标识（称为session id），如果已包含则解释以前已经为此客户端创建过session，做事器就按照session id把这个session检索出来利用（检索不到，会新建一个），如果客户端要求不包含session id，则为此客户端创建一个session并且天生一个与此session干系联的session id，session id的值该当是一个既不会重复，又不随意马虎被找到规律以仿造的字符串，这个session id将被在本次相应中返回给客户端保存。保存这个session id的办法可以采取cookie，这样在交互过程中浏览器可以自动的按照规则把这个标识发送给做事器。一样平常这个cookie的名字都是类似于SEEESIONID。但cookie可以被人为的禁止，则必须有其他机制以便在cookie被禁止时仍旧能够把session id通报回做事器。常常被利用的一种技能叫做URL重写，便是把session id直接附加在URL路径的后面。比如：http://damonare.cn?sessionid=123456还有一种技能叫做表单隐蔽字段。便是做事器会自动修正表单，添加一个隐蔽字段，以便在表单提交时能够把session id通报回做事器。比如：
<form name=\"大众testform\"大众 action=\公众/xxx\公众>
<input type=\"大众hidden\公众 name=\"大众sessionid\公众 value=\公众123456\公众>
<input type=\公众text\"大众>
</form>
实际上这种技能可以大略的用对action运用URL重写来代替。
2.3 Cookie和Session大略比拟
Cookie和Session 的差异：
1）cookie数据存放在客户的浏览器上，session数据放在做事器上。2）cookie不是很安全，别人可以剖析存放在本地的cookie并进行cookie欺骗，考虑到安全应该利用session。3）session会在一定韶光内保存在做事器上。当访问增多，会比较占用你做事器的性能考虑到减轻做事器性能方面，应该利用cookie。4）单个cookie保存的数据不能超过4K，很多浏览器都限定一个站点最多保存20个cookie。5）以是建议：将上岸信息等主要信息存放为SESSION其他信息如果须要保留，可以放在cookie中2.4 document.cookie的属性
expires属性
指定了coolie的生存期，默认情形下coolie是暂时存在的，他们存储的值只在浏览器会话期间存在，当用户推出浏览器后这些值也会丢失，如果想让cookie存在一段韶光，就要为expires属性设置为未来的一个过期日期。现在已经被max-age属性所取代，max-age用秒来设置cookie的生存期。
path属性
它指定与cookie关联在一起的网页。在默认的情形下cookie会与创建它的网页，该网页处于同一目录下的网页以及与这个网页所在目录下的子目录下的网页关联。
domain属性
domain属性可以使多个web做事器共享cookie。domain属性的默认值是创建cookie的网页所在做事器的主机名。不能将一个cookie的域设置成做事器所在的域之外的域。例如让位于http://order.damonare.cn的做事器能够读取http://catalog.damonare.cn设置的cookie值。如果http://catalog.damonare.cn的页面创建的cookie把自己的path属性设置为“/”，把domain属性设置成“.damonare.cn”，那么所有位于http://catalog.damonare.cn的网页和所有位于http://orlders.damonare.cn的网页，以及位于http://damonare.cn域的其他做事器上的网页都可以访问这个cookie。
secure属性
它是一个布尔值，指定在网络上如何传输cookie，默认是不屈安的，通过一个普通的http连接传输
2.5 cookie实战
这里我们利用javascript来写一段cookie,借用w3cschool的demo:
function getCookie(c_name){
if (document.cookie.length>0){
c_start=document.cookie.indexOf(c_name + \公众=\公众)
if (c_start!=-1){
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(\"大众;\"大众,c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
}
}
return \"大众\"大众;
}
function setCookie(c_name,value,expiredays){
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ \"大众=\"大众 +escape(value)+
((expiredays==null) ? \"大众\"大众 : \公众; expires=\公众+exdate.toUTCString())
}
function checkCookie(){
username=getCookie('username')
if(username!=null && username!=\"大众\公众){alert('Welcome again '+username+'!')}
else{
username=prompt('Please enter your name:',\"大众\"大众)
if (username!=null && username!=\"大众\"大众){
setCookie('username',username,355)
}
}
}
把稳这里对Cookie的生存期进行了定义，也便是355天
3. localStorage
这是一种持久化的存储办法，也便是说如果不手动打消，数据就永久不会过期。
它也是采取Key - Value的办法存储数据，底层数据接口是sqlite，按域名将数据分别保存到对应数据库文件里。它能保存更大的数据（IE8上是10MB，Chrome是5MB），同时保存的数据不会再发送给做事器，避免带宽摧残浪费蹂躏。
3.1 localStorage的属性方法
下表是localStorge的一些属性和方法
属性方法 解释 localStorage.length 得到storage中的个数 localStorage.key(n) 得到storage中第n个元素对的键值（第一个元素是0） localStorage.getItem(key) 获取键值key对应的值 localStorage.key 获取键值key对应的值 localStorage.setItem(key, value) 添加数据，键值为key，值为value localStorage.removeItem(key) 移除键值为key的数据 localStorage.clear() 打消所有数据
3.2 localStorage的缺陷
① localStorage大小限定在500万字符旁边，各个浏览器不一致② localStorage在隐私模式下不可读取③ localStorage实质是在读写文件，数据多的话会比较卡（firefox会一次性将数据导入内存，想想就以为吓人啊）④ localStorage不能被爬虫爬取，不要用它完备取代URL传参4. sessionStorage
和做事器端利用的session类似，是一种会话级别的缓存，关闭浏览器会数据会被打消。不过有点特殊的是它的浸染域是窗口级别的，也便是说不同窗口间的sessionStorage数据不能共享的。利用方法（和localStorage完备相同）：
属性方法 解释 sessionStorage.length 得到storage中的个数 sessionStorage.key(n) 得到storage中第n个元素对的键值（第一个元素是0） sessionStorage.getItem(key) 获取键值key对应的值 sessionStorage.key 获取键值key对应的值 sessionStorage.setItem(key, value) 添加数据，键值为key，值为value sessionStorage.removeItem(key) 移除键值为key的数据 sessionStorage.clear() 打消所有数据
5. sessionStorage和localStorage的差异
sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化确当地存储，仅仅是会话级别的存储。当用户关闭浏览器窗口后，数据立马会被删除。localStorage用于持久化确当地存储，除非主动删除数据，否则数据是永久不会过期的。第二天、第二周或下一年之后，数据依然可用。5.1 测试
sessionStorage:
if (sessionStorage.pagecount){
sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
}else{
sessionStorage.pagecount=1;
}
console.log(\"大众Visits \"大众+ sessionStorage.pagecount + \"大众 time(s).\公众);
测试过程：我们在掌握台输入上述代码查看打印结果
掌握台首次输入代码：
关闭窗口，掌握台再次输入代码：
所谓的关闭窗口即销毁，便是这样，关闭窗口重新打开输入代码输出结果还是上面图片的样子，也便是说关闭窗口后sessionStorage.pagecount即被销毁，除非重心创建。或者从历史记录进入才会干系数据才会存在。好的，我们再来看下localStorge表现：
if (localStorage.pagecount){
localStorage.pagecount=Number(localStorage.pagecount) +1;
}else{
localStorage.pagecount=1;
}
console.log(\公众Visits \"大众+ localStorage.pagecount + \公众 time(s).\公众);
掌握台首次输入代码：
关闭窗口，掌握台再次输入代码：
6. web Storage和cookie的差异
Web Storage(localStorage和sessionStorage)的观点和cookie相似，差异是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你要求一个新的页面的时候Cookie都会被发送过去，这样无形中摧残浪费蹂躏了带宽，其余cookie还须要指定浸染域，不可以跨域调用。
除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie须要前端开拓者自己封装setCookie，getCookie。
但是Cookie也是不可以或缺的：Cookie的浸染是与做事器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生
