本地存储(cookie\localStorage\sessionStorage)

cookie详解

cookie是一种最原始也是最简单的一种存储方式,是用来记录每次http的连接产生的信息或数据,并在下次http连接时,一起发送给服务器.
cookie的特点

1. 在浏览器缓存中
2. 只能存文本(字符)
3. 大小有限制:4k~
4. 条数限制:50条~
5. 时间限制:默认是会话级别(关闭浏览器自动删除),可以设置指定的时间
6. 不允许跨域:同源策略,浏览器,路径
7. 一般情况下,cookie需要在服务器环境下使用

cookie值的要求

1. 必须是:名字和值
2. 必须是字符
3. 名字和值中不允许出现特殊字符
4. 一行代码只能设置一条cookie
5. 第一组名字[名字=值]表示要存储的cookie的名字和值之后用分号分隔,表示当前这条cookie的描述 路径,时间,域名,地址

//查
console.log(document.cookie);		//没有cookie时获取到空字符
// 默认路径默认时间默认服务器
document.cookie="a=10";
document.cookie="a=60";
//指定路径
document.cookie="b=20;path=/"; 		//当前服务器根路径
//指定时间
var date = new Date();
date.setDate(date.getDate()+7);
document.cookie="c=30;expires="+d;
//指定服务器
document.cookie="d=40;damain=127.0.0.1";
//指定时间指定路径
var date = new Date();
date.setDate(date.getDate()+3);
document.cookie="e=50;path=127.0.0.1;expires="+d;
//删除cookie 就是让这个cookie过期
var date = new Date();
document.cookie="f=50;expires="+d;

cookie的封装

// 设置cookie
    function setCookie(key, val, ops){
        ops = ops || {};
        // 1. 处理路径
        // var p = "";
        // if(ops.path){
        //     p = ";path="+ops.path;
        // }
        var p = ops.path ? ";path="+ops.path : "";
        // 2. 处理有限期
        var strD = "";
        if(ops.expires){
            var d = new Date();
            d.setDate(d.getDate()+ops.expires)
            strD = ";expires="+d
        }
        // 3. 设置cookie
        document.cookie = `${key}=${val}${p}${strD}`;
    }


    // 删除cookie
    function removeCookie(key){
        setCookie(key, null, {
            expires:-1
        })
    }

    // 获取cookie
    function getCookie(key){
        // 1. 获取所有cookie，并使用【; 】第一次分割，区分出每组cookie
        var cookie = document.cookie.split("; ");
        // console.log(cookie)
        // 2. 遍历所有cookie
        for(var i=0;i<cookie.length;i++){
            // 3. 并使用【=】第二次分割，区分出每组cookie的名字和值
            // 4. 根据cookie的名字判断是否相等，德奥对应的cookie的值
            if(cookie[i].split("=")[0] === key){
                return cookie[i].split("=")[1];
            }
        }
        // 5. 以上代码执行完毕后，如果没有找到对应的cookie，那么返回空字符
        return "";
    }

本地存储

1. cookie是直接存到硬盘上的,所以也叫本地存储

2. 本地存储不止有cookie

   • localStorage：永久级本地存储
   • sessionStorage：会话级本地存储

3. localStorage和sessionStorage的特点:

   1. HTML5版本中新增的技术
   2. 不会随着http发往服务器,是一种真正的本地存储
      1. 不用必须运行在服务器环境
   3. 大小为 5M
   4. 只能存文本
   5. 不允许跨域

共同点：不安全、不能跨域、不能跨浏览器,写入的都是字符

localStorage和sessionStorage都是window的子对象
localStorage使用:

   window的属性    返回 一个localStorage对象
     对象的属性：
                localStorage.key=value    		设置，修改
                localStorage.key;            	获取
                delete localStorage.key  		删除   
        方法：√
                localStorage.setItem(key,value) 	设置、修改
                localStorage.getItem(key)        	获取
                localStorage.removeItem(key)      	删除一个
                localStorage.clear()                删除所有 ×
        事件：
        		window的onstorage事件
    				当localStorage或sessionStorage被改变时会触发
              		事件对象
                        ev.key 			返回 变化的key
                        ev.newValue 	变化后的值
                        ev.oldValue 	变化前的值
        写到localStorage里面的都是字符
                json        ->        str 序列化
                str         ->        json 反序列化，实体化

SessionStorage

sessionStorage 生命周期 会话结束时
        属性：同上
        方法：同上