JS-数据存储-cookie

用途:在客户端的磁盘上以很小的文件保存一定量的数据。

• cookie的内容
  document.cookie='name=值;[expires=失效时间;
  path=路径访问;domain=域名访问;secure=安全的https限制通信]'
  上面的代码是设置cookie的格式，cookie是document的属性，可以通过为其赋值的形式设置cookie值。[]内的名值对儿是可选属性。
• 名称
  一个唯一确定的cookie名称，必须经过URL编码。
• 值
  是名称对应的值，必须被URL编码
  document.cookie='user='+encodeURIComponent('杜杜');
  同xml一样，需要对中文字符进行编码。
• 失效时间
  表示cookie何时应该被删除的时间戳。表示在这个时间范围内，每次访问该网站都会向该网站的服务器发送这个已经保存在本地的cookie值，但是如果这个日期是以前的日期，那么该cookie值就会被删除。
  var date=new Date();
  date.setDate(date.getDate()+7);
  document.cookie='user='+encodeURIComponent('杜杜')+';expires='+date.toGMTString();
  //已经写入磁盘啦

• 路径
  只有访问在服务器内指定的那个路径下的文件时，才会向该文件发送cookie，否则访问其他路径下的文件，就不会向其发送该cookie。
  点开大图，这是hao123网站cookie的信息，发现基本上路径都是与该网页在一个路径下的。当然，如果设置了其他的路径，那么该网页就访问不了他设置的cookie信息。

  
  2015-02-07_205628.jpg
• 域
  默认不设置时，该值就是请求所在域，如果domain设置成了该域名的二级子域下，那么不仅其他子域名访问不到该cookie，连一级域名也无法访问。
• 安全标志
  document.cookie='user='+encodeURIComponent('杜杜')+';secure';
  一旦设置了安全标志，那么cookie只有在使用SSl时，才发送到服务器。
• 封装cookie
  var cookieUtil={
  set :function(name,value,expires,path,domain,secure){
  var cookieText=encodeURIComponent(name)+'='+
  encodeURIComponent(value);
  if(expires instanceof Date){
  cookieText+=';expires='+expires.toGMTString();
  }
  if(path){
  cookieText+=';path='+path;
  }
  if(domain){
  cookieText+=';domain='+domain;
  }
  if(secure){
  cookieText+=';secure';
  }
  document.cookie=cookieText;
  },
  get:function(name){
  var cookieName=encodeURIComponent(name)+'=',
  cookieStart=document.cookie.indexOf(cookieName),
  cookieValue=null;
  if(cookieStart>-1){
  var cookieEnd=document.cookie.indexOf(';',cookieStart);
  if(cookieEnd==-1){
  cookieEnd=document.cookie.length;
  }
  cookieValue=decodeURIComponent(document.cookie.substring(cookieStart+cookieName.length,cookieEnd))
  }
  return cookieValue;
  },
  unset:function(name,path,domain,secure){
  this.set(name,'',new Date(0),domain,path)
  }
  }
  function setCookieDate(day){
  var date=null;
  if(typeof day=='number'&&day>0){
  date=new Date();
  date.setDate(date.getDate()+day);
  }else{
  throw new Error('!!')
  }
  return date;
  }
  cookieUtil.set('name','杜杜',setCookieDate(7));
  cookieUtil.set('user','lala',setCookieDate(7));
  cookieUtil.set('email','126.com',setCookieDate(7));
  这个封装，将设置cookie，读取cookie，消除cookie都封装在一个对象里。
  特点：
  1、在设置cookie值时，需要判断失效时间expires，不仅要判断他是否为空，而且还要判断他是否是Date类型的实例。
  2、取得cookie值时，是根据传递的cookie名称来得出该名称对应的值。
  上例子设立了三个名值对，打印cookie信息时，出现的是一个组合的字符串，
  2015-02-07_212333.jpg
  所以当采用get方式，来获取信息时，需要传递某个名称来查找对应的信息。
  alert(cookieUtil.get('name'))//杜杜
  3、读取cookie值时，需要熟练的使用字符串的方法。
• cookie限制
• 每个域的cookie总数是有限的，IE6以及更低版本限制每个域名最多20个，然后其他浏览器都相对多一点，但是为了兼容性考虑，也就得限制在20多个啦。
• 每个cookie的长度限制在4095B以内。
• 由于cookie是存在客户端计算机上的，所以安全性不太高。
• IE5中的用户数据
  考虑到这款浏览器的市场份额，所以，我就忽略啦
• HTML5中web存储机制
  首先需要了解一下Storage类型，该类型提供最大的存储空间来存储名值对儿，该类型为所有他的实例定义了如下方法：
  clear():删除所有值；但是火狐没有实现。
  getItem(name):根据制定的名字name获取对应的值。
  key(index):获得index位置处的值的名字。
  removeItem(name):删除由name制定的名值对。
  setItem(name,value):为制定的name设置一个对应的值。
  还可以通过delete操作符进行删除某个名值对。（webkit不支持）
  还可以使用length属性来判断有多少名值对。
  【然后呢】该类型实例的对象，可以进行存储数据。IE8+，FF3.5+,chrome4+,Opera 10.5+
• sessionStorage该对象是Storage的一个实例，存储特定于某个会话的数据，也就是只保存到浏览器关闭。该对象可以跨越页面刷新而存在，同时，如果浏览器支持，浏览器崩溃后重启依然可用（IE不支持）。
  存储在sessionStorage中的数据只能由最初给对象存储数据的页面访问，所以对于多页面应用有限制。
  从兼容的角度考虑，只介绍大多数浏览器都支持的方法。
  • 存储数据
    sessionStorage.setItem('name','dudu');//使用方法存储数据,推荐
    sessionStorage.name='dudu';//使用属性存储数据
  • 读取数据
    var name=sessionStorage.getItem('name');
    var name=sessionStorage.name;
  • 删除数据
    sessionStorage.removeItem('name');
  • 迭代 sessionStorage中的值
    第一种方法利用length属性以及key()方法
    第二种方法使用for in 循环
    【总结】这个方法是适合小段数据存储，且无法跨越会话存储数据。
• globalStorage该对象不是是Storage的实例，但是当为该对象指定域名使才是Storage的实例。
  可以通过location.host来作为域名，比较安全。
  例如
  globalStorage[location.host]
  这样指定域名（子域名访问无效）后，就具备了Storage的实例的全部特征。该对象是用来跨会话存储数据的。如果不使用removeItem()或者delete来删除，或者用户未清除浏览器缓存，存储在该对象属性中的数据会一直保存在磁盘上，所以非常适合客户端存储文档，或者长期保存用户偏好。
  但是正是由于该对象需要额外指定域名所以比较麻烦，所以在修订过的html5规范中用localStorage取代了globalStorage。
• localStorage该对象的设置读取以及删除数据的方式与sessionStorage一致。
  为了兼容只支持globalStorage的浏览器，可以使用以下函数
  function getLoacalStorage(){
  if(typeof localStorage=='object'){
  return localStorage;
  }else if(typeof globalStrage=='object'){
  return globalStorage[location.host];
  }else{
  throw new Error('local storage not available')
  }
  }
  var storage=getLoacalStorage();
  当然，任何方法都是有限制的，一般来说对存储空间大小的限制一般都是以每个来源（协议、域。端口）为单位的。每个来源都有固定大小的空间用于保存自己的数据，考虑到这个限制，就要注意分析，和控制每个来源有多少页面需要保存数据。“2.5MB”