本地存储-cookie和localStorage

cookie （会话）

cookie是浏览器提供的一项功能

是一个本地的存储文件用于存储数据

前端和后端程序都可以调用操作cookie中存储的数据

cookie的基本属性：

• name ：键名
• value ：键值
• domain ：域名
• path ：路径 符合路径的文件才能访问cookie
• expires的操作语法 ：有效期 / 失效 超过有效期的cookie浏览器就自动删除

页面打开检查（F12），点击application，就会出现cookie

JavaScript设定cookie的基本语法形式：

• 设定：

        document.cookie = '键名=键值;expires=有效期;path=路径';

                注：键名键值是必须设定的，expires不设置默认session会话时效，path不设定默认当前文件所在文件夹

• 获取：

     const 变量 = document.cookie

                注：cookie键值对字符串，需要转化为对象形式 也就是：const 变量 = JSON.parse(document.cookie)

以下代码是一个封装好的cookie.js文件：

/* 
    设定cookie函数
        @param  name    cookie的键名
        @param  value   cookie的键值
        @param  expires cookie的时效 默认值是 ''
        @param  path    cookie的路径 默认值是 ''

*/
function mySetCookie(name, value, time = '', path = '') {
    // 如果 time 输入了数据 根据 数据设定 时效性
    if (time !== '') {
        // 根据输入的时间设定 time存储的时间对象的时间戳
        const t = new Date();
        t.setTime(t.getTime() + time * 1000 - 8 * 60 * 60 * 1000);
        // 将 时间对象 赋值给 time变量储存
        time = t;
    }

    // 设定 cookie
    document.cookie = `${name}=${value};expires=${time};path=${path}`;
}

/*
    获取 cookie 转化为 对象
        @return obj 转化后cookie对象

*/
function myGetCookie() {
    // 定义一个对象 存储 转化结果
    const obj = {};

    // 后去 cookie 键值对字符串
    let str = document.cookie;

    // 根据 分号空格 将字符串转护为数组
    const arr1 = str.split('; ');

    // 根据 =等号 将 数组1中的键值对 转化为 数组
    arr1.forEach(item => {
            const arr2 = item.split('=');

            // 数组2 中 索引0 存储 键名
            // 数组2 中 索引1 存储 键值
            obj[arr2[0]] = arr2[1];
        })
        // 返回值 是 这个对象
    return obj;
}

使用时导入这个js文件

设置cookie时调用函数mySetCookie( name , value , time , path )就可以添加到cookie

查看cookie时调用函数myGetCookie( )就可以获取到cookie

localStorage（本地存储）

是浏览器提供的一项功能，在本地存储数据数值

localStorage的基本语法形式：

设定存储：

window.localStorage.setItem( '键名' , '键值' )     或       localStorage.键名 = 键值

存储json字符串：

localStorage.arr = JSON.stringify( [ {} , {} , {} , .... ] )

获取：

localStorage.getItem( '键名' ) 

删除：

localStorage.removeItem( '键名' )     或      delete（localStorage.age）

cookie和localStorage的区别

 1. cookie   - 第一要通过服务器才能操作            localStorage  - 本地就可以操作

2. cookie   - 前端后端都可操作                           localStorage  - 只要前端操作

3. cookie   - 有时效，过期浏览器自动删除         localStorage  -  没有时效，除非手动删除，不然一直存在

4. cookie   - 有路径，符合路径的文件才能访问        localStorage  -  路径只能是根目录

5. cookie   - 只能存储字符串                          localStorage  -  可以存储字符串以及json字符串

6. cookie   - 存储内容小，一般 4K 左右         localStorage  - 存储内容较大，一般 4M 左右

总结

只需要前端使用的数据 一般用localStorage存储

前端后端都需要使用的数据 一般用cookie存储