首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

js往cookie中存数据

在JavaScript中,向Cookie存储数据是通过document.cookie属性实现的。以下是关于Cookie基础概念、优势、类型、应用场景以及如何存储数据的详细解释:

基础概念

Cookie是一种存储在用户浏览器上的小型数据片段,它可以包含一些信息,比如用户偏好设置、会话标识符等。当用户访问一个网站时,浏览器会将相关的Cookie发送到服务器,以便服务器识别用户。

优势

  • 持久性:可以设置Cookie的有效期,使其在浏览器关闭后仍然保留。
  • 跟踪用户行为:可以用来跟踪用户的浏览习惯,以便提供个性化服务。
  • 简化登录过程:存储会话标识符,使用户无需每次访问都重新登录。

类型

  • 会话Cookie:浏览器关闭后失效。
  • 持久Cookie:设置了过期时间,即使浏览器关闭也会保留。

应用场景

  • 用户认证:存储会话令牌,以便用户在多个页面间保持登录状态。
  • 购物车:存储用户的购物车内容。
  • 个性化设置:存储用户的偏好设置,如主题、语言等。

如何存储数据

向Cookie中存储数据的基本步骤如下:

  1. 设置Cookie
  2. 设置Cookie
    • keyvalue 是你要存储的数据。
    • expires 是Cookie的过期时间。
    • path 是Cookie的有效路径。
  • 读取Cookie
  • 读取Cookie
  • 删除Cookie
  • 删除Cookie

示例代码

以下是一个完整的示例,展示如何设置、读取和删除Cookie:

代码语言:txt
复制
// 设置Cookie
function setCookie(name, value, days) {
    let expires = "";
    if (days) {
        const date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "") + expires + "; path=/";
}

// 读取Cookie
function getCookie(name) {
    const nameEQ = name + "=";
    const ca = document.cookie.split(';');
    for (let i = 0; i < ca.length; i++) {
        let c = ca[i];
        while (c.charAt(0) === ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
}

// 删除Cookie
function eraseCookie(name) {
    document.cookie = name + "=; Max-Age=-99999999; path=/";
}

// 使用示例
setCookie("username", "JohnDoe", 7); // 设置一个名为username的Cookie,值为JohnDoe,有效期7天
console.log(getCookie("username")); // 输出: JohnDoe
eraseCookie("username"); // 删除username Cookie
console.log(getCookie("username")); // 输出: null

注意事项

  • 安全性:避免在Cookie中存储敏感信息,因为它们可以被客户端脚本访问。
  • 大小限制:每个域名下的Cookie总大小有限制,通常为4KB。
  • 跨域限制:Cookie只能在设置它的域名下访问。

通过以上信息,你应该能够理解如何在JavaScript中操作Cookie,并了解其相关的基础概念和应用场景。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

JS 中 cookie 的使用

②、实际上 cookie 是存于用户硬盘的一个文件,这个文件通常对应于一个域名,当浏览器再次访问这个域名时,便使这个cookie可用。...,我们可以通过读取 cookie 中的信息,恢复购物车中的物品。...PS:实际操作中,这种方法很少用了,基本上都是将这些信息存储在数据库中。然后通过查询数据库的信息来恢复购物车里的物品   ③、页面之间的传值。在实际开发中,我们往往会通过一个页面跳转到另外一个页面。...后端服务器我们可以通过数据库,session 等来传递页面所需要的值。但是在浏览器端,我们可以将数据保存在 cookie 中,然后在另外页面再去获取 cookie 中的数据。...PS:这里要注意 cookie 的时效性,不然会造成获取 cookie 中数据的混乱。 3、怎么使用 cookie?

6.2K70
  • Java List 中存不同的数据类型

    在最近的实践中,有人突然问了一个问题:在 Java 的 List 中可以存不同的数据类型吗?...testList 中存的对象都是 String 字符串了。...解答List 中是可以存不同的数据类型的。但是在定义的时候需要定义成: List testList = new ArrayList();,不能为要使用的 List 指定数据类型。...实战在实际的编码中,我们通常都会为我们的 List 指定数据类型。这个数据类型可以是任何数据类型或者对象,这样可以保证我们的 List 中存的数据类型只有一种数据类型。...我们会尽量避免在使用的时候对数据进行转换,例如上面的情况,我们 List 对象中存的是对象,我们不知道我们的对象是 Stirng 还是 Long,这个时候要猜。

    79070

    解决getJdbcTemplate往oracle数据库中插入数据返回主键出错问题

    我们使用Spring中的JdbcDaoSupport往Mysql中插入数据并返回主键代码,我们使用的mysql数据库,主键在数据库中设置为自增长:该类继承自JdbcDaoSupport,所以能直接使用getJdbcTemplate...} }, keyHolder); Integer generatedId = keyHolder.getKey().intValue(); return generatedId; } 当我们数据库换成...oracle数据库时,因为oracle数据库採用序列进行ID标识,我们改动对应的sql语句,其它不变: String sql = "insert into tb_user (id,username,age...; 执行后它会抛出异常:oracle数据库的number类型不能转换为int类型 换成其它类型也不行,这是由于JdbcDaoSupport中的getJdbcTemplate()不正确oracle支持;...解决方法:继承Spring中的SimpleJdbcDaoSupport,JdbcDaoSupport能做的,SimpleJdbcDaoSupport基本也能完毕,所以继承后,使用其getSimpleJdbcTemplate

    85020

    js中的数据

    数据类型 基本数据类型:number、string、null、boolean、undefined 引用类型:Object、Function、Array 在此不做过多阐释。...数据、内存、变量 数据:以二进制形式存储在内存中,代表一定信息的数字。 内存:内存条通电后产生的存储空间。内存又分为栈内存和堆内存。栈内存中存放的是全局变量或局部变量。而堆内存中存放的是对象。...每个变量都对应的一块小内存,变量名用来查找对应的内存,变量值就是保存在内存中的数据。 关系:「内存」是用来存储「数据」的空间,而「变量」是内存的标识。...引用变量赋值 变量修改 多个引用变量指向同一个对象,通过一个「变量修改对象内部数据」,其他所有的变量看到的是修改之后的数据。...比较 可能会有一些疑惑:变量与函数中,修改了obj的值,为什么在引用变量与函数中,obj的值没有被修改? 首先需要明白,js函数传递变量参数时,是「值传递」(个人理解:传递的是变量的值)。

    5.5K20

    Oracle公司被曝在数据校订功能中存漏洞

    在2014年美国黑帽大会上,数据库安全专家David Litchfield展示了Oracle公司一款旗舰产品的数据校订(data redaction)功能中的一些漏洞,Oracle公司在最新版本数据库...基本上,数据校订功能是用于掩饰敏感信息,当返回的数据库查询包含敏感信息(例如社会安全号码、信用卡号码和其他个人身份信息等),并且这些数据到达特定的校订卷时,这些数据会用X来替换,而在校订卷以外的数据则返回正常数据...另一个漏洞可能允许攻击者访问“SELECT’S WHERE”中的数据,主要通过迭代推理攻击来暴力破解数字,基本上就是设定一个数字范围直到猜测出正确的数字。...Litchfield表示他展示数据校订漏洞不只是要记录当前的Oracle安全问题,而且也想强调该公司似乎不愿意吸取过去的安全教训。...这份备忘录最终让微软创建了安全开发生命周期,微软产品(例如微软SQL Server)中漏洞的数量和严重程度程均有所下降。

    70960

    Python-sqlite3-08-往数据库中写入Excel中信息

    语言版本:Anaconda3-4.3.0.1-Windows-x86_64 编辑器:pycharm-community-2016.3.2 这个系列讲讲Python对sqlite3的操作 本文介绍: 将已知数据写入数据库...当我们建立一个数据库后,很多时候需要将原来Excel的数据写入到数据库中,例如一些常数项信息等 有多种方法可以实现,如数据库管理软件自带的导入功能,遗憾的是大部分都不好用; 还有就是本文提到的方法,撰写代码...数据库内容 ? Part 2:代码 ?....db") excel_address = os.path.join(current_address, "基础数据.xlsx") # 读取Excel数据 df = pd.read_excel(excel_address...pd.read_excel(excel_address),读取Excel文件中的工作表,默认第1行作为列名 for index, row in df.iterrows():对df进行按行遍历 通过row

    1.1K10

    JS中Buffer数据详解

    ,有时需要字节数组、8位、16位、32位整数型数组,所以对于JS中处理二进制迟早学习比较好 现今世界上几乎所有的计算机体系结构都是以字节(byte)为二进制数据的基本单位,所以二进制常常以字节数组的形式存在于程序当中...众所周知,JS是弱类型语言i,并且JS设计之初似乎根本没想过要处理二进制的东西,对于字节的概念可以说是非常非常的模糊。...Array不一样),ArrayBuffer是连续内存,因此对于高密度的访问(如音频数据)操作而言它比JS中的Array速度会快很多 ArrayBuffer是不能直接被访问的,因此需要借助Typed Array...(如文件文件)的情况 ​ 对象URL ​ 对象URL也被称为 blob URL,指的是引用保存在File或Blob中数据的URL,使用对象URL的好处是没必要把内容读取到js中,而直接使用文件内容,能生成一个链接...就省去了把数据先读取js中,另一方面img标签则会找到相应的内存地址,直接读取数据并将图像显示到页面中

    6.7K30

    android之通过Button的监听器往adapter中添加数据时出错

    本来源代码如下: List model; //自定义的一个List数据,存储的是自定义的类 LunchListAdapter...//省略 class onSavaLis implements OnClickListener{ //Button save的监听器,点击之后往model里面添加数据 Restaurant r...break; } model.add(r);//① } } 问题是,点击存储之后,在如果①处采用的是adapter.add(r); 那么ListView里面展示出来的item全都是最后存进去的那个..., 如果①处采用的是model.add(r); 那么ListView里面展示出来的item是正确的,刚好是你存储的内容的顺序,但是点击item之后,从model里面读取出来的内容跟上面一样,全都是最后存进去的数据...暂时想到的就是在②处定义的r可能model里面之前加入的数据都覆盖了,但是还是有点糊涂,先记下这么个印象,望高手赐教.

    69810

    JS中数据类型转换

    JS中数据类型转换汇总 JS中的数据类型分为 【基本数据类型】 数字 number 字符串 string 布尔 boolean 空 null 未定义 undefined 【引用数据类型】...函数 function 真实项目中,根据需求,我们往往需要把数据类型之间进行转换 把其它数据类型转换为number类型 1.发生的情况 isNaN检测的时候:当检测的值不是数字类型,浏览器会自己调用Number...alert(1) =>'1' 基于“+”进行字符串拼接的时候 把引用类型值转换为数字的时候,首先会转换为字符串,然后再转换为数字 给对象设置属性名,如果不是字符串,首先转换为字符串,然后再当做属性存储到对象中(.../Boolean等方法转换 条件判断中的条件最后都会转换为布尔类型 ... if(n){ //=>把n的值转换为布尔验证条件真假 } if('3px'+3){ //=>先计算表达式的结果'3px3...=>'NaN佳佳trueundefinedtrue' 特殊情况:“==”在进行比较的时候,如果左右两边的数据类型不一样,则先转换为相同的类型,再进行比较 对象==对象:不一定相等,因为对象操作的是引用地址

    3.7K10

    Cookie复用的妙用:数据处理中的高效利器!

    简介浏览网站时,服务器会往浏览器发一些数据,叫做 Cookie。它是一种认证数据,存储在电脑浏览器上,用于后续访问时身份验证和记录登录信息。...通过获取和管理 Cookie,我们能模拟用户登录状态、记录用户信息,实现多个页面间的数据共享等。需要注意的是,一旦 Web 服务器把页面发给浏览器后,在连接关闭后,服务端不再保留用户的信息。...通过文件读写操作,可以将 Cookie 信息保存到一个文本文件中。检查本地文件中是否已经成功获取了 Cookie 信息。再次打开浏览器并植入 Cookie 信息进入主页。...Python 实现通过以下两个方法,可以在自动化测试过程中模拟用户的登录状态,以便于进行后续的测试操作:获取当前页面所有 cookie 信息,确保正确的 cookie 写入到一个本地文件中,通过driver.get_cookies...第一个参数是要写入的数据 yaml.safe_dump(cookie, f) def test_add_cookie(self): # 1.

    11310

    深入浅出前端本地储存

    JS 访问 cookie ducoment.cookie // 访问被禁止了 这样最大的好处是避免了 XSS 攻击 XSS 攻击 比如你在水一个论坛,这个论坛有个 bug:不会对发布内容中的 HTML...LocalStorage 一出现,就在许多应用场景彻底替代了 Cookie,大部分需要在浏览器上存数据的场景,都会优先使用 LocalStorage 它和 Cookie 的主要区别是: 储存空间更大,...image-20210204032958192 上面的 学号、姓名、年龄、专业 就是数据表的字段 当我们想往 student 表添加数据时,就需要按照规定的格式,往表里加数据(关系型数据库的特点,而 IndexedDB...能被服务器指定,浏览器会自动在请求中带上 大小只有 4kb 大规模应用于广告商定位用户 配合 session 也是一个可行的登录鉴权方案 Web Storage 大小有 10MB,使用极其简单 但是只能存字符串...,需要转义才能存 JS 对象 大部分情况下能完全替代 Cookie,且更安全 配合 token 可以实现更安全的登录鉴权 IndexedDB 储存空间无上限,功能极其强大 原生支持 JS 对象,能更好的储存数据

    83010

    C#中往数据库插入更新时候关于NUll空值的处理

    SqlCommand对传送的参数中如果字段的值是NULL具然不进行更新操作,也不提示任何错误。。。百思不得其解。。。先作个记录,再查资料看看什么原因。...找到了相关的解决方法 ADO.Net的Command对象如何向数据库插入NULL值(原创) 一般来说,在Asp.Net与数据库的交互中,通常使用Command对象,如:SqlCommand。...strSql.ToString(),param);         } 调用:  feedBackBLL.UpdateFeedBackStatus(_feedBackID, 4,null); 二、C#中往数据库插入空值的问题...在用C#往数据库里面插入记录的时候, 可能有的字段你不赋值,那么这个字段的值就为null, 如果按一般想法的话,这个值会被数据库接受, 然后在数 据表里面显示为NUll, 实际上这就牵扯到一个类型的问题..., C#中的NUll于SQL中的null是不一样的, SQL中的null用C#表示出来就 是DBNull.Value, 所以在进行Insert的时候要注意的地方.

    3.7K10
    领券