cookie存储及与webstorage的不同点

目录

一、Cookie是什么？

二、Cookie的作用

三、Cookie的注意事项

四、cookie的增删改查：

增加\设置cookie：

查找\读取cookie：

删除cookie：

设置cookie的函数封装：

设置cookie(设置或删除)

获取cookie

cookie的作用域：

五、webstorage和cookie：

cookie和webStorage区别：

六、cookie的使用场景：

---

一、Cookie是什么？

        cookie是一种客户端把用户信息以文件形式存储到本地硬盘的技术

二、Cookie的作用

        cookie的作用单一，就存储客户数据。(存储数据的文件叫Cookie文件)

三、Cookie的注意事项

        1、不同的浏览器存放的cookie的位置不同，不能通用

        2、cookie文件的存储以域名形式进行区分

        3、一个域名下存放cookie的数量有限

        4、每个cookie存放的内容大小有限

四、cookie的增删改查：

增加\设置cookie：

        会话cookie(session cookie)，不设置数据过期时间，默认cookie在浏览器关闭时删除

        格式 "key=value"

修改cookie，只需要重新赋值

document.cookie = "username=Dsir66";
document.cookie = "age=20";

查找\读取cookie：

        document.cookie获取cookie中的所有数据，以字符串的形式返回

//username=Dsir66; age=20
console.log(document.cookie);

var cookieStr = document.cookie
            .replace(/\s/g, "")    //正则去除空格
            .split(";")    //去除;变为数组
            .join("=")    //数组添加=变为字符串
			.split("=");    //=替换变为数组
console.log(cookieStr);

删除cookie：

        直接将cookie的有效时间设置为过去即可

        expires：设置cookie的时间

var date = new Date(); // 获取当前时间
// getTime()获取当前时间的毫秒数
// setTime()根据毫秒数设置时间

date.setTime(date.getTime() - 1);    //设置减，删除

date.setTime(date.getTime() + 3 * 24 * 60 * 60 * 1000);    //设置为加，到时间自动删除

console.log(date.toUTCString());    //世界时
document.cookie = `age=20;expires=${date.toUTCString()}`;
console.log(document.cookie);

设置cookie的函数封装：

设置cookie(设置或删除)

        para1：cookie的key值

        para2：cookie的value值

        para3：cookie的有效期(正值：有效期；负值：删除)

function setCookie(cname, cvalue, cexdays) {
    var date = new Date();    //获取时间
    date.setTime(date.getTime() + cexdays * 24 * 60 * 60 * 1000);    //获取有效期
    var expires = "expires=" + date.toUTCString();    //拼接有效期数据
    document.cookie = `${cname}=${cvalue};${expires}`;
}
setCookie("username", "Dsir66", 3);

获取cookie

        para1：获取指定cookie的key

function getCookie(cname) {
    var name = cname + "=";
    var ck = document.cookie.replace(/\s/g, "").split(";");
    for (let i = 0; i < ck.length; i++) {
        //indexOf()查找指定字符串首次出现的位置，没有找到返回-1，找到返回所在的下标
        if (ck[i].indexOf(name) == 0) {
            return ck[i].split("=")[1];
        }
    }
}
console.log(getCookie("username"));    //Dsir66

cookie的作用域：

cookie 有一个很重要的概念，就是cookie的作用域  

domain参数可以设置父域名以及自身，但不能设置其它域名，包括子域名，否则cookie不起作用。

        那么cookie的作用域：

cookie的作用域是domain本身以及domain下的所有子域名。/cookie 的作用域为当前域及其子域。

        设置cookie 参数

        document.cookie = "name=value;expires=有效期;domain=域名;path=有效路径;secure=1"

name，必需值，cookie名称

value，必需值，cookie的值

expires，可选，cookie有效期

domain，可选。规定 cookie的域名。

                不设置此参数时，默认为当前主机域名

                127.0.0.1 当前主机域名

path，可选，规定cookie的有效服务路径。参数 domain 基础上设置有效路径。

cookie是存于用户硬盘的一个文件,这个文件通常对应于一个域名,也就是说,cookie可以跨越一个域名下的多个网页,但不能跨越多个域名使用。

默认不定义path，cookie只对当前目录(/test)及子目录有效

document.cookie = "name=/test目录有效";

path="/" 表示cookie在整个域名下都有效

document.cookie = "golobal=整个域名下都有效;path=/"

如果path设置为“/test”，那么cookie只在 domain下的/test目录及子目录里有效。

注意：

这里的path是 encodeURI() 加密后的路径

路径要从vscode打开的文件夹开始

        encodeURI()：中文加密

        decodeURI()：中文解密

var path = encodeURI("/domain/index");

document.cookie = "pathIndex=/index有效;path=" + path;

五、webstorage和cookie：

浏览器存储可以采用哪些方式?

      localStorage本地存储

      sessionStorage会话存储

      cookie

      indexed DB

      缓存存储

cookie和webStorage区别：

一、存储空间不同

1、web Storage提供5M存储空间，cookie提供4k的空间

二、存储位置不同

-web Storage前端本地存储，数据存储在浏览器中

-cookie数据以文件形式存储到本地硬盘中

三、与服务器交互

-web Storage中的数据仅仅是本地存储，不会和服务器发生交互

-cookie的内容会随着请求一并发送到服务器(每请求一个新的页面时，cookie都会被发送过求，造成流量，宽带的浪费，不安全；cookie尽量不要存储敏感数据)

四、存储时间

-web Storage

-localStorage本地存储，持久化存储，浏览器关闭，数据依旧存在，除非手动删除，否则一直存在

-sessionStorage会话存储，暂时性存储，浏览器关闭，数据自动清除

-cookie

自定义时间

五、接口

-web Storage提供了许多丰富易用的接口，拥有setItem/getItem/removeItem/clear等方法，操作数据更简单

-cookie需要自己封装setCookie/getCookie方法等

六、cookie的使用场景：

名字 cookie：

用户在网页输入名字时，名字可以记录在cookie中；再次访问网站时，会收到类似"Welcome Dsir"的欢迎词

保存用户登录信息：

访问登录界面时，一般会有类似"下次自动登录"的选项，勾选后下次就不需要验证，就可以通过cookie保存用户的id

日期cookie： 

用户访问网页时，可以将当前的日期存储在cookie中。再次访问网页时，会收到类似这样的消息

："Your last visit was on Tuesday August 11,2022!".日期也是从cookie中获取

购物车、跟踪用户行为等……