cookie：存储数据，当用户访问了某个网站（网页）的时候，我们就可以通过cookie向来访问者电脑存储数据

  1. 不同的浏览器存放的cookie位置不一样，也是不能通用的
  2. cookie的存储是以域名的形式进行区分的
  3. cookie的数据可以设置名字
  4. 一个域名下存放的cookie的个数是有限制的，不同的浏览器存放的个数不一样
  5. 每个cookie存放的内容大小也是有限制的，不同的浏览器存放大小不一样

我们通过documen.cookie来获取当前网站下的cookie的时候，得到的是字符串形式的值，它包含了当前网站下所有的cookie，它会把所有的cookie通过一个分号+空格的形式串联起来

如果我们想要长时间存放一个cookie。需要在设置这个cookie的时候同时给它设置一个过期的时间

cookie默认是临时存储的，当浏览器关闭进程的时候自动销毁

Cookie的特点：


  • 存储限制：    —域名100个cookie，每组值大小4KB
  • 客户端、服务器端，都会请求服务器（头信息）
  • 页面间的cookie是共享的（同一个浏览器下的）

下面是cookie的存取和删除的封装函数

//获取cookie
    function getCookie(key){
        var arr = document.cookie.split("; ");
        for(var i=0; i<arr.length;i++){
            var arr2 = arr[i].split("=");
            if(arr2[0]==key){
                return decodeURI(arr2[1])
            }
        }
    }
    //设置cookie
        function setCookie(key,value,t){
            var oDate = new Date();
            oDate.setDate(oDate.getDate()+t);
            document.cookie = key + '='+value+';expries ='+oDate.toGMTString();
        }
        //删除cookie
    function removeCookie(key){
        setCookie(key,-1)
    }


storage


  .sessionStorage


  —session临时会话，从页面打开到页面关闭的时间段


 —窗口的临时存储，页面关闭，本地存储消失


.localStorage


 —永久存储（可以手动删除数据）



storage的特点


  • 存储量限制（5M）
  • 客户端完成，不会请求服务器处理
  • sessionStorage数据是不共享、localSorage共享

Storage API


.setItem():


  •   设置数据，key/value类型，类型都是字符串
  •   可以用获取属性的形式操作

.getItem():


  •   获取数据，通过Key来删除相应的value

.removeItem():


  • 删除数据，通过key来删除相应的value

.clear():


  • 删除全部存储的值

存储事件：


  • 当数据有修改或删除的情况下，就会触发storage事件
  • 在对数据进行改变的窗口对象上是不会触发的
  • key：修改或删除的key值，如果调用clear()，key为null
  • newValue：新设置的值，如果调用removeStorage()，key为null
  • oldValue：调用改变前的value值
  • storageArea:当前的storage对象
  • url：触发该脚本变化的文档的url

注：session同窗口才可以：例如iframe操作

看一个小例子：

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>

window.onload = function(){
  var aInput = document.getElementsByTagName('input');
  
  for(var i=0;i<aInput.length;i++){
    
    aInput[i].onclick = function(){
      
      if(this.checked){
        window.localStorage.setItem('sel',this.value);
      }
      else{
        window.localStorage.setItem('onSel',this.value);
      }
      
    };
    
  }
  
  window.addEventListener('storage',function(ev){  //当前页面的事件不会触发
    
    if( ev.key == 'sel' ){
      
      for(var i=0;i<aInput.length;i++){
        if( ev.newValue == aInput[i].value ){
          aInput[i].checked = true;
        }
      }
      
    }
    else if( ev.key == 'onSel' ){
      
      for(var i=0;i<aInput.length;i++){
        if( ev.newValue == aInput[i].value ){
          aInput[i].checked = false;
        }
      }
      
    }
    
  },false);
  
};

</script>
</head>

<body>
<input type="checkbox" value="香蕉" />香蕉<br />
<input type="checkbox" value="苹果" />苹果<br />
<input type="checkbox" value="西瓜" />西瓜<br />
<input type="checkbox" value="哈密瓜" />哈密瓜<br />
</body>
</html>