浅显易懂的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://www.lanlanwork.com

存档