浅显易懂的cookie的使用（设置和获取cookie缓存）

2020-4-22    前端达人

js中cookie的使用（设置和获取cookie缓存）
生为一个已经入职一年多的前端小白，第一次写博客还有点小激动，有不足的地方还希望大家多多指出，因为最近项目有涉及到利用cookie缓存数据，所以在这边再巩固一下。

1、cookie的定义
在使用浏览器中，经常涉及到数据的交换，比如你登录系统账号，登录一个页面。我们经常会在此时设置记住账号啥的，或者自动登录选项。那这些都是怎么实现的呢，答案就是今天的主角cookie了，Cookie是由HTTP服务器设置的，保存在浏览器中，但HTTP协议是一种无状态协议，在数据交换完毕后，服务器端和客户端的链接就会关闭，每次交换数据都需要建立新的链接。
从JavaScript的角度看，cookie 就是一些字符串信息。这些信息存放在客户端的计算机中，用于客户端计算机与服务器之间传递信息。
在JavaScript中可以通过 document.cookie 来读取或设置这些信息。由于 cookie 多用在客户端和服务端之间进行通信，所以除了JavaScript以外，服务端的语言（如PHP）也可以存取 cookie。

2、cookie的使用
设置cookie
function setCookie(c_name, value, expiredays) {
       var exdate = new Date()
       exdate.setDate(exdate.getDate() + expiredays)
       document.cookie = c_name + "=" + escape(value) +
           ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString())+";path=/";
   }
1
2
3
4
5
6
调用该方法如：

var userId="123456";
setCookie("userId", userId, 30);
1
2
下面是里面参数的意义

参数 含义
c_name 自己定义的cookie名称
value 需要放在定义的c_name 中的值
expiredays cookie的有效期
这里有一个要注意点就是 " path=/"
" path=/"是只存下的cookie再该项目所有页面都能去获取，如果你想只存到弄个特定目录可以在path中指定路径，如：“path=/views/myHomePage”,z这样你可以在/views/myHomePage文件下所有页面都能取到你存的cookie了。

取回cookie
 function getCookie(c_name) {
        if (document.cookie.length > 0) {
            c_start = document.cookie.indexOf(c_name + "=")
            if (c_start != -1) {
                c_start = c_start + c_name.length + 1
                c_end = document.cookie.indexOf(";", c_start)
                if (c_end == -1) c_end = document.cookie.length
                return unescape(document.cookie.substring(c_start, c_end))
            }
        }
        return ""
    }
1
2
3
4
5
6
7
8
9
10
11
12
调用该方法如：

var newUserId= getCookie("userId");
console.log(newUserId)
alert(newUserId)
————————————————
版权声明：本文为CSDN博主「前端陈伟霆」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_43927397/article/details/105658614







分享本文至：
« 浅析HTTP协议 如何分析产品设计语言？ »

分类

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档