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

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

不同的浏览器存放的cookie位置不一样，也是不能通用的
cookie的存储是以域名的形式进行区分的
cookie的数据可以设置名字
一个域名下存放的cookie的个数是有限制的，不同的浏览器存放的个数不一样
每个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>

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

猜你喜欢