cookie 数据存储

cookie原生

cookie: 原意为'甜点', 实则为浏览器本地存储的一个变量, 它的值是一个字符串, 

当用户打开一个网页时, 可以通过cookie这个变量来记录网页中的一些重要信息, 

下一次再打开此网页,就可以从cookie中把信息取出并展示出来,  如 自动登陆, 收藏搜索记录等等

 

cookie是html传统常用的功能, webstorage是html5新增的功能 

    webstorage相当于cookie功能的拆分, 但不能完全取代cookie 

    cookie与webstorage都是限制在同源内共用, 跨域不互通 

    cookie在同一个ip/域名下存储数据量限制是4kb, webstorage限制5M的存储量 

cookie存储有两种数据存储状态: 

    1, 临时cookie: cookie的默认形态, 类似于sessionStorage, 存储在内存中, 

一旦网页窗口关闭, 网页内存会被清理, cookie数据也会被清理

    2, 有效期cookie, 给cookie数据添加有效期, 类似于localstorage, 存储在硬盘中, 

即使网页关闭, cookie依然存在, 除非过期清理或手动清理

 注意: 谷歌浏览器本地协议file:// 不支持cookie 使用cookie时请用服务器环境打开网页

cookie 数据存储的特点: 

        (1) cookie变量使用document调用, 而不是window

        (2) cookie字段值是字符串类型, 字符串中的数据以键值对格式存在, 

多个键值对用分号分隔

        (3) cookie变量的赋值和普通变量赋值不一样, cookie多次赋值, 

相同的键会被替换, 不同的键不受影响

        (4) cookie赋值如果不是键值对结构, 也会以键值对的形式存储, 

默认给它的键是 空 

        (5) cookie中的键具有唯一性, 值可以相同

document.cookie = 'name=李四';
document.cookie = 'age=20';
document.cookie = 'name=王五';
document.cookie = "cookie";
document.cookie = "storage";

　　　　(6) cookie数据默认是会话存储数据,窗口关闭即清理

　　　　(7) cookie在赋值时可以给数据添加有效期, 会把数据从内存中转入磁盘, 

一旦过了有效期, 数据会被自动清理

var time = new Date()
time.setMinutes(time.getMinutes() + 1);
document.cookie = 'account=15981892283;expires='+time

　　　　(8) cookie中的数据想删除, 设置数据的有效期, 把有效期设置为当前时刻的前一个时间点, 

硬盘中存储的这条cookie数据会立即被删除

time.setHours(time.getHours() - 1);
document.cookie = "age=;expires="+time

把cookie中的字段分离出来

var arr = document.cookie.split('; ')
        console.log(arr)

jquery 方法使用cookie

需要引入jquery.js和jquery.cookie.js

// 1, 增, 汉字会被jQuery插件自动转码为URLEncode编码
        $.cookie("name","张三", {secure:true});
        $.cookie('age', 20, {secure:true});
        $.cookie("sex", true, {
            expires: new Date('2021-09-07 15:42:00'),
            secure:true
        })

        // 2, 删
        $.removeCookie("name", {secure:true})

        // 3, 改 
        $.cookie('age', 30, {secure:true})

        // 4, 查
        console.log($.cookie("age"))