H5本地存储(storage)和cookie详解

系统管理员 2022-05-20 05:38 275阅读 0赞

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>