JS如何设置cookie、读取cookie及删除cookie

这篇具有很好参考价值的文章主要介绍了JS如何设置cookie、读取cookie及删除cookie。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

转自:微点阅读 https://www.weidianyuedu.com

JavaScript是运行在客户端的脚本,因此一般是不能够设置Session的,因为Session是运行在服务器端的。

而cookie是运行在客户端的,所以可以用JS来设置cookie.

假设有这样一种情况,在某个用例流程中,由A页面跳至B页面,若在A页面中采用JS用变量temp保存了某一变量的值,在B页面的时候,同样需要使用JS来引用temp的变量值,对于JS中的全局变量或者静态变量的生命周期是有限的,当发生页面跳转或者页面关闭的时候,这些变量的值会重新载入,即没有达到保存的效果。解决这个问题的最好的方案是采用cookie来保存该变量的值,那么如何来设置和读取cookie呢?

首先需要稍微了解一下cookie的结构,简单地说:cookie是以键值对的形式保存的,即key=value的格式。各个cookie之间一般是以“;”分隔。

JS设置cookie:

假设在A页面中要保存变量username的值("jack")到cookie中,key值为name,则相应的JS代码为:

复制代码代码如下:

document.cookie="name="+username;

JS读取cookie:

假设cookie中存储的内容为:name=jack;password=123

则在B页面中获取变量username的值的JS代码如下:

?

1

2

3

4

5

6

7

8

9

10

var username=document.cookie.split(";")[0].split("=")[1];

//JS操作cookies方法!

//写cookies

function setCookie(name,value)

{

var Days = 30;

var exp = new Date();

exp.setTime(exp.getTime() + Days*24*60*60*1000);

document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();

}

读取cookies

?

1

2

3

4

5

6

7

8

function getCookie(name)

{

var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");

if(arr=document.cookie.match(reg))

return unescape(arr[2]);

else

return null;

}

删除cookies

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

function delCookie(name)

{

var exp = new Date();

exp.setTime(exp.getTime() - 1);

var cval=getCookie(name);

if(cval!=null)

document.cookie= name + "="+cval+";expires="+exp.toGMTString();

}

//使用示例

setCookie("name","hayden");

alert(getCookie("name"));

//如果需要设定自定义过期时间

//那么把上面的setCookie 函数换成下面两个函数就ok;

//程序代码

function setCookie(name,value,time)

{

var strsec = getsec(time);

var exp = new Date();

exp.setTime(exp.getTime() + strsec*1);

document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();

}

function getsec(str)

{

alert(str);

var str1=str.substring(1,str.length)*1;

var str2=str.substring(0,1);

if (str2=="s")

{

return str1*1000;

}

else if (str2=="h")

{

return str1*60*60*1000;

}

else if (str2=="d")

{

return str1*24*60*60*1000;

}

}

//这是有设定过期时间的使用示例:

//s20是代表20秒

//h是指小时,如12小时则是:h12

//d是天数,30天则:d30

setCookie("name","hayden","s20");文章来源地址https://www.toymoban.com/news/detail-410165.html

到了这里,关于JS如何设置cookie、读取cookie及删除cookie的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • php开发实战分析(2):cookie的动态使用(设置、获取、删除、猜你喜欢原理、购物车调用)

    在 PHP 中,cookie 是一种用于在客户端(浏览器)和服务器之间存储数据的一种机制。 它们通常用于跟踪和识别用户,并存储用户的偏好设置。下面是一些常见的用法和函数来操作 cookie。 可以使用 setcookie() 函数来设置 cookie。该函数有多个参数,其中最重要的是名称和值。下

    2024年02月15日
    浏览(61)
  • 我如何设置一个http only的cookie

    设置一个 HttpOnly 的 cookie 意味着该 cookie 不能通过客户端脚本(如 JavaScript)进行访问。这是一个安全措施,通常用于减少某些类型的攻击,如跨站脚本攻击 (XSS)。 以下是如何在不同的上下文中设置 HttpOnly cookie: 1. 在 HTTP 响应中: 如果你正在使用纯 HTTP/HTTPS(没有特定的后端

    2024年02月08日
    浏览(33)
  • 【JS】js给对象动态添加、设置、删除属性名和属性值

    js中访问对象属性一共有两种方法:点获取法和方括号获取法。 使用点符号访问属性值 alert( user.name ); // John 使用方括号访问属性值 alert( user[name]); // John 注意: 如果我们遍历一个对象,我们获取属性的顺序是和属性添加时的顺序相同吗? 简短的回答是:“有特别的顺序”:整

    2023年04月13日
    浏览(48)
  • 解读spring中@Value 如何将配置转自定义的bean

    着急寻求解决方式的猿友先看这块 定义配置转化类 将转化类放入转化工厂 属性注入 spring在bean生命周期的属性赋值中,会根据属性的类型,匹配相应的转化类,执行转化,进而赋值。 不难看出,这些转化类仅执行转化逻辑,不存在线程安全问题,可以将其放入spring的IOC中,

    2024年02月13日
    浏览(40)
  • Node.js-fs模块文件创建、删除、重命名、文件内容的写入、读取以及文件夹的相关操作

    异步写入:writeFile() 同步写入:writeFileSync() 异步追加写入:appendFile() 同步追加写入:appendFileSync() 方式一(appendFile): 方式二(writeFile): fs.createWriteStream( path [, options ] ) 程序打开一个文件是需要消耗资源的 ,流式写入可以减少打开关闭文件的次数。 流式写入方式适用于

    2024年02月14日
    浏览(104)
  • 使用Vue.js时,如何删除ESLint?

    在Vue.js项目中,ESLint是一个常用的JavaScript代码规范工具。它可以帮助开发者遵循一致的代码风格,并捕获潜在的错误。然而,有时候你可能希望删除ESLint,例如当你认为它对你的项目不再必要或者与其他工具产生冲突时。下面将介绍如何删除Vue.js中的ESLint。 要删除ESLint,你

    2024年02月04日
    浏览(43)
  • 【佳学基因检测】Node.js中如何读取并调用内容

    这段代码是一个简单的Node.js服务器,它当接收到HTTP请求时,会读取并返回一个叫做’jiaxuejiyin.html’的文件。以下是对这段代码的逐句解释: var http = require(\\\'http\\\'); 使用Node.js的 require 方法导入HTTP模块,并将其存储在变量 http 中。HTTP模块允许Node.js通过Internet上的Hyper Text Trans

    2024年02月05日
    浏览(84)
  • three.js 场景中如何彻底删除模型和性能优化

    在three.js场景中,要彻底删除外部模型,需要执行以下几个步骤: 从场景中移除模型 你可以使用 scene.remove(model) 或者 scene.remove(model.children[0]) 将模型从场景中移除。如果是多个模型,可以用循环来处理。 移除所有材质和纹理 模型通常会包含材质和纹理,即使你把它们从场景

    2024年02月10日
    浏览(45)
  • Linux下如何创建新用户并设置密码及删除用户

    一:演示创建新用户binbin 在命令行输入useradd binbin,表示创建新用户binbin 回车后,直接 ll 回车查看到 binbin 就已经创建好了 二:设置密码 1.1输入命令: passwd binbin,回车,设置用户 binbin 的登录密码 1.2 注意: 输入密码时候输入内容不可见,光标也不会移动输入完直接回车

    2024年02月12日
    浏览(50)
  • 简洁易用的记账小程序——微点记账

    沙雕审核,你告诉我什么是宣传?哪些是过渡宣传?删掉哪些内容?沙雕 由于每个月的信用卡账单太过吓人,记性也不是特别的好,加上微信和支付宝账单中有些明细不是很明确。比如在京东花销的明细不会记录用户购买了什么,只会记录哪个通道支出的。所以,才会有了想

    2024年02月02日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包