cookie

 

            1, 什么是cookie?

            cookie原意为"甜饼", 在js中表示浏览器文档中的一个数据字段, 它的值是一段字符串, 存储在浏览器中

 

            2, cookie有什么用?

            当用户访问网站时,cookie用来记录用户的重要信息,再次访问网站时,通过cookie识别用户信息,实现: 自动登陆, 用户提醒, 收藏, 收缩历史等功能

 

            3, cookie和webStorage的区别?

            (1),cookie数据量小,整个域名内最多存储限制为 4KB

            webStorage数据量大, 整个域名内最多存储限制为 5MB

            (2),cookie不仅仅存在于浏览器本地, 它可以随请求发给服务器,由服务器读取和修改

            webStorage只能存储在浏览器本地,服务器无法读取和修改

            (3),cookie是传统的前端技术,很早就用了, html5新增了webStorage功能

            (4),cookie是document的属性, 而webStorage是window的属性

 

4, cookie的用法

        */

        // 注意: 谷歌浏览器不支持file://协议打开cookie, 要使用服务器环境打开

        // cookie虽然是一个字符串, 但字符串中是键值对结构

        document.cookie = "name=张三"

        // cookie值是键值对结构,赋值的新键值对不会覆盖老键值对,会同时存在

        document.cookie = "age=20"

        // cookie键值对中键是唯一的, 赋值已有的键会会把对应值更新

        document.cookie = "age=30"

        // 如果数据没有设置键, 默认键为空,

        document.cookie = "李四"

        document.cookie = "王五"

        // cookie默认是会话存储, 和sessionStorage相似, 窗口关闭则清理

        // 我们可以给cookie添加数据是,设置cookie的有效期, 和localStorage相似, 在过期之前,cookie不会被清理

        // 在键值对后使用expires设置过期时间点, 到达这个时间点, cookie此键值对被清理

        console.log(new Date)

        document.cookie = "sex=男;expires=Date Thu Mar 10 2022 09:58:08 GMT+0800"

        // 例子: 设置一个有效期为1小时的cookie值

        var now = new Date()

        now.setHours(now.getHours() + 1)

        document.cookie = "sex=男;expires="+now

        // 例子: 设置一个有效期为1小时的cookie值

        // 也可以使用max-age设置cookie有效时常,默认单位秒,支持计算

        document.cookie = "phone=110;max-age=60*60"

        console.log(document.cookie)

        // 需求: 从本地cookie中取出年龄age值

        var arr = document.cookie.split("; ")

        console.log(arr)

        var str = arr.find(function(item){

            // startsWith 判断字符串是否以某一段字符开头

            return item.startsWith("age=")

        })

        console.log(str)

        console.log(str.split("=")[1])