localstorage sessionStorage cookie 三者区别

本文链接： https://blog.csdn.net/qq_42601626/article/details/100170711

localstorage sessionStorage cookie 三者介绍

localstorage

本地存储：只存储文本，时间永久，相比于cookie 存储内容大（5M），不安全不允许跨域不能跨浏览器。不会发往服务器。

window的属性  返回 一个localStorage对象

    对象的属性：
        localStorage.key=value   设置，修改
        localStorage.key;        获取
        delete localStorage.key  删除  localStorage.key = undefined
        for-in localStorage      枚举 批量删除

    方法：
        localStorage.setItem(key,value) 设置、修改
        localStorage.getItem(key)       获取
        localStorage.removeItem(key)    删除一个
        localStorage.clear()            删除所有 

    事件：
        window.onstorage 检测key 发生了变化，事件对象
            ev.key 返回 变化的key
            ev.newValue 变化后的值
            ev.oldValue 变化前的值
   特别注意  写到localStorage里面的都是字符
        json    ->    str 序列化
        str     ->    json 反序列化，实体化

sessionStorage

属性和方法与localstorage一样。唯一的不同就是生命周期只有会话级。

sessionStorage 引入了一个“浏览器窗口”的概念，sessionStorage 是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是 sessionStorage 在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage 也是不一样的

cookie

只能存字符，存储内容小（4k），条数限制大约50条。拥有时间属性设置，会话级，完全兼容。不允许跨域，不能跨浏览器。服务器环境（每次都会跟随请求发往服务器。）

document.cookie   查询cookie
window.document.cookie="XXX"
设置cookie 每次只能设置一条cookie 设置过期时间可删除cookie。

cookie的格式要求，名称＝值在cookie 的名或值 中 不能使用分号（;）、逗号（,）、等号（=）以及空格这是cookie的赋值规则

        
        var date = new Date();
        date.setDate(date.getDate()+28);
       // 表示获取当前日期的天数，增加28天之后，重新设置给日期，此时date就表示未来的某个时间

        document.cookie = "name=abc;expires=" + date;
      //cookie在date的时间时效，而date的时间为当前日期加上28，也就是28天之后cookie失效
        
         document.cookie = "user=admin;path=/;expires="+d;
      //  设置内容  路径   时间
    获取
        var str = document.cookie;
        str返回当前cookie的值，以字符串的形式

Cookie 需要程序员自己来封装，原生的cookie接口不够友好

localStorage 和 sessionStorage 原生接口可以接受，可以封装来对Object和Array有更好的支持

cookie的封装

function setCookie(key,val,options){
    options=optiopns||{};
    if(options.expires){
        var d=new Date();
        d.setDate(d.getDate()+options.expires);
        expires=";expires"+d;
    }
    if(options.path){
        path=":path="+options.path;
    }
    document.cookie=`${val}${expires}${path}`
}
function removeCookie(key,options){
    options=options||{};
    options.expires=-1;
    setCookie(key,"2",options);
}
function getCookie(key){
 console.log(document.cookie);
 var arr=document.cookie.split(";")
 for(var i=0 ;i<arr.length;i++){
     if(arr[i].split("=")[0]==key){
         return  arr[i].split('=')[1];
     }
 }
 return "";
}