document.cookie在IE下不支持时，用sessionStorage配合解决

问题引入：搜索框autocomplete搜索自动提示搜索历史记录。用document.cookie实现，在chrome下没有问题，在IE下，document.cookie的值一直为空，且赋值无效，最后想到采取sessionStorage解决。

如下，在setCookie和getCookie的方法中，分别去判断document.cookie是否存在，不存在则使用sessionStorage去保存和提取。最后在IE下解决了这个问题，代码如下：

var historyCount=50; //保存历史记录个数    /**  * 增加浏览历史记录  */  function setHistory(key){  histories = getCookie('histories');var list = histories.split('#--#');    for (var i = 0; i < list.length; i++) {          try {              if(list[i] == key){              return;            }          } catch (e) {              break;          }      }          if(list.length>=historyCount){          //删除最开始的多余记录          var count = list.length - historyCount + 1; //需要删除的个数          list.splice(0,count); //开始位置,删除个数      }      list.push(key);    setCookie('histories',list.join('#--#'), 365); //365天  }        /**  * 获得浏览历史记录  * @return  */  function getHistory(){debuggervar availableTags = new Array();    var histories = getCookie('histories');      if(histories==""){      }else{          var history = histories.split('#--#'); //历史记录          var length = history.length;          if(length > historyCount){              length = historyCount;          }         availableTags.length = length;        for ( var i = length-1; i >= 0; i--) {          availableTags[i] =  history[i];        }    }      return availableTags;}    /**  * 添加cookie  * @param cookName cookie名称  * @param cookName cookie值  * @param expiredays 时长  */  function setCookie(cookName,cookValue,expiredays){      var exdate=new Date();      exdate.setDate(exdate.getDate()+expiredays*24*3600*1000);      var cookieVal=cookName+ "=" +escape(cookValue)+((expiredays==null) ? "" : ";expires="+exdate.toGMTString())+";path=/";      document.cookie=cookieVal;      if(document.cookie==""){    sessionStorage.setItem(cookName,cookValue);    }}      /**  * 获取cookie  * @param cookName cookie名称  * @return  */  function getCookie(cookName)  {  var cookieStr;if(document.cookie==""){cookieStr=sessionStorage.getItem(cookName);if(cookieStr!=null && cookieStr!=""){return cookieStr;}}if(document.cookie.length>0){          var c_start = document.cookie.indexOf(cookName + "=");          if(c_start!=-1){ //存在              c_start = c_start + cookName.length + 1; //"history="后的开始位置              var c_end=document.cookie.indexOf(";",c_start); //找到JSESSIONID在的位置              if (c_end==-1){ //JSESSIONID不存在                  c_end=document.cookie.length;              }              return unescape(document.cookie.substring(c_start,c_end));          }       }      return "";  }    

附参考资料：

cookies，sessionStorage 和 localStorage 的区别

1.Web Storage　　

　　软件编程希望通过一些手段来持久化的存储一些有用的数据。对于网络化编程，一般将这项任务交给了服务器端的数据库或者浏览器端的cookie。

　　随着HTML5的出现，web开发又有了两种选择：Web Storage和Web SQL Database.

　　Web Storage有两种形式：

　　LocalStorage（本地存储）和sessionStorage（会话存储）。

　　这两种方式都允许开发者使用js设置的键值对进行操作，在在重新加载不同的页面的时候读出它们。这一点与cookie类似。

　　　（1）与cookie不同的是：Web Storage数据完全存储在客户端，不需要通过浏览器的请求将数据传给服务器，因此相比cookie来说能够存储更多的数据，大概5M左右。单个cookie在客户端的限制是3K，就是说一个站点在客户端存放的COOKIE不能3K。

　　　（2）LocalStorage和sessionStorage功能上是一样的，但是存储持久时间不一样。

    　　　　LocalStorage：浏览器关闭了数据仍然可以保存下来，并可用于所有同源（相同的域名、协议和端口）窗口（或标签页）永久存储，永不失效，除非手动删除

   　　　　 sessionStorage：数据存储在窗口对象中，窗口关闭后对应的窗口对象消失，存储的数据也会丢失。就是浏览器窗口关闭就失效了。

　　　　　注意：sessionStorage 都可以用localStorage 来代替，但需要记住的是，在窗口或者标签页关闭时，使用sessionStorage 存储的数据会丢失。

　　　（3）使用 local storage和session storage主要通过在js中操作这两个对象来实现，分别为window.localStorage和window.sessionStorage. 这两个对象均是Storage类的两个实例，自然也具有Storage类的属性和方法。

 　　　　　但是cookie需要前端开发者自己封装setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。

Storage类的相关成员如下：

成员名方法参数描述length属性获取存储数据的条数

key(n)　　　　

n:索引值根据索引值，返回键名getItem(key)key:键名根据键名，获取数据值setItem(key,value)key:键名 value:键值根据键名和键值设置数据项，如果键名已经存在，则覆盖值removeItem(key)key:键名根据键名删除一个数据项clear()无清空当前的Storage对象

 

 

 

 

 

其用法：

参数设置很简单，如下例：

localStorage.setItem('age', 40); 

访问一个存储的数据一样很容易：

 = .getItem('age'); 

可以这样删除一个特定的键值对：

localStorage.removeItem('age'); 

或者删除所有的键值对：

localStorage.clear(); 

sessionStorage与页面 js 数据对象的区别:

sessionStorage只要是同源的同窗口（Tab）中，刷新页面或者进入不同的页面数据对象仍然被保存，也就是说只要浏览器窗口不关闭，加载页面（同源）或刷新页面，数据仍存在。

 

sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的，可以方便的在web请求之间保存数据。有了本地数据，就可以避免数据在浏览器和服务器间不必要地来回传递。

sessionStorage、localStorage、cookie都是在浏览器端存储的数据，其中sessionStorage的概念很特别，引入了一个“浏览器窗口”的概念。sessionStorage是在同源的同窗口（或tab）中，始终存在的数据。也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一页面，数据仍然存在。关闭窗口后，sessionStorage即被销毁。同时“独立”打开的不同窗口，即使是同一页面，sessionStorage对象也是不同的。

Web Storage带来的好处：

1. 减少网络流量：一旦数据保存在本地后，就可以避免再向服务器请求数据，因此减少不必要的数据请求，减少数据在浏览器和服务器间不必要地来回传递。
2. 快速显示数据：性能好，从本地读数据比通过网络从服务器获得数据快得多，本地数据可以即时获得。再加上网页本身也可以有缓存，因此整个页面和数据都在本地的话，可以立即显示。
3. 临时存储：很多时候数据只需要在用户浏览一组页面期间使用，关闭窗口后数据就可以丢弃了，这种情况使用sessionStorage非常方便。

浏览器本地存储与服务器端存储之间的区别

其实数据既可以在浏览器本地存储，也可以在服务器端存储。

浏览器端可以保存一些数据，需要的时候直接从本地获取，sessionStorage、localStorage和cookie都由浏览器存储在本地的数据。

服务器端也可以保存所有用户的所有数据，但需要的时候浏览器要向服务器请求数据。

1.服务器端可以保存用户的持久数据，如数据库和云存储将用户的大量数据保存在服务器端。

2.服务器端也可以保存用户的临时会话数据。服务器端的session机制，如jsp的 session 对象，数据保存在服务器上。实现上，服务器和浏览器之间仅需传递session id即可，服务器根据session id找到对应用户的session对象。会话数据仅在一段时间内有效，这个时间就是server端设置的session有效期。

服务器端保存所有的用户的数据，所以服务器端的开销较大，而浏览器端保存则把不同用户需要的数据分布保存在用户各自的浏览器中。

浏览器端一般只用来存储小数据，而服务器可以存储大数据或小数据。

服务器存储数据安全一些，浏览器只适合存储一般数据。

cookie与session的区别于联系

（1）cookie与session的区别：cookie数据保存在客户端，session数据保存在服务器端

　　　　如果web服务器端使用的是session，那么所有的数据都保存在服务器上，客户端每次请求服务器的时候会发送当前会话的sessionid，服务器根据当前sessionid判断相应的用户数据标志，以确定用户是否登录或具有某种权限。由于数据是存储在服务器上面，所以你不能伪造，但是如果你能够获取某个登录用户的 sessionid，用特殊的浏览器伪造该用户的请求也是能够成功的。sessionid是服务器和客户端链接时候随机分配的，一般来说是不会有重复，但如果有大量的并发请求，也不是没有重复的可能性。

　　　　如果浏览器使用的是cookie，那么所有的数据都保存在浏览器端，比如你登录以后，服务器设置了cookie用户名，那么当你再次请求服务器的时候，浏览器会将用户名一块发送给服务器，这些变量有一定的特殊标记。服务器会解释为cookie变量，所以只要不关闭浏览器，那么cookie变量一直是有效的，所以能够保证长时间不掉线。如果你能够截获某个用户的 cookie变量，然后伪造一个数据包发送过去，那么服务器还是认为你是合法的。所以，使用 cookie被攻击的可能性比较大。如果设置了的有效时间，那么它会将 cookie保存在客户端的硬盘上，下次再访问该网站的时候，浏览器先检查有没有 cookie，如果有的话，就读取该 cookie，然后发送给服务器。如果你在机器上面保存了某个论坛 cookie，有效期是一年，如果有人入侵你的机器，将你的  cookie拷走，然后放在他的浏览器的目录下面，那么他登录该网站的时候就是用你的的身份登录的。所以 cookie是可以伪造的。当然，伪造的时候需要主意，直接copy    cookie文件到 cookie目录，浏览器是不认的，他有一个index.dat文件，存储了 cookie文件的建立时间，以及是否有修改，所以你必须先要有该网站的 cookie文件，并且要从保证时间上骗过浏览器。

（2）cookie和session的共同之处：cookie和session都是用来跟踪浏览器用户身份的会话方式。

sessionStorage 、localStorage 和 cookie 之间的区别

共同点：都是保存在浏览器端，且同源的。

区别：

1. cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。
2. 存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
3. 数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
4. 作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。
5. Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。
6. Web Storage 的 api 接口使用更方便。

sessionStorage 和 localStorage 之间的区别

见上面的区别3、4

sessionStorage与页面 js 数据对象的区别

页面中一般的 js 对象或数据的生存期是仅在当前页面有效，因此刷新页面或转到另一页面这样的重新加载页面的情况，数据就不存在了。

而sessionStorage 只要同源的同窗口（或tab）中，刷新页面或进入同源的不同页面，数据始终存在。也就是说只要这个浏览器窗口没有关闭，加载新页面或重新加载，数据仍然存在。