在JavaScript中如何实现读取和写入cookie

一、在JavaScript中如何实现读取和写入cookie

1、本篇内容主要给大家通过实例讲述了JavaScript读取和写入cookie的相关知识点，有这方面需要的朋友参考下吧。

2、首先先让我们简单地了解一下cookie.

3、在我们制作网页的过程中，经常需要把信息从一个页面传递给另一个页面，这时候就需要用到JavaScript中的cookie机制了。简单说来，cookie提供了一种便捷的方式，能够在用户的计算机上保存少量数据并且远程获得它们，从而让网站可以保存一些细节信息，比如用户的习惯设置或是上一次访问网站的时间。cookie本身是一些短小的信息，能够由页面保存在用户的计算机上，然后被其他页面读取。cookie一般都设置为在一定时间后失效。

4、当然，cookie也有局限之处：浏览器对于能够保存的cookie数量有所限制，通常是几百个或者多一点。一般情况下，每个域名20个cookies是允许的，而每个域最多能保存4KB的cookie.除了大小限制可能导致的问题，也有很多原因会引起硬盘上的cookie消失，比如达到有效期限了，或是用户清理了cookie信息，或是换用了其他浏览器。因此，cookie不适合用来保存重要数据，在编写代码时也要考虑到cookie获取异常的处理方法。

5、在JavaScript中，使用document对象的cookie属性来储存和获取cookie.通常，document.cookie里的信息是由成对的名称和值组成的字符串，每一对数据的形式是：

6、name=value;下面我们将通过一个简单的例子来展示在JavaScript中如何读取和写入cookie.

7、首先是createCookie.html，在该页面中会创建一个cookie,完整的代码如下：

8、<title>createCookie</title>

9、 var name= document.getElementById("name").value;

10、 var pwd= document.getElementById("pwd").value;

11、 document.cookie= name+'|'+pwd;

12、 window.location.href="showCookie.html";

13、 Userame:<input id="name" type="text"/><br><br>

14、 Password:<input id="pwd" type="password"/><br><br>

15、<button onclick="createCookie()">Submit</submit>

16、</html>该页面的截图如下：

17、点击submit按钮，就会创建一个cookie，在该cookie中保存了Username和Password信息，并且会跳转到showCookie.html页面。其中，showCookie.html页面的完整代码如下：

18、<title>showCookie</title>

19、//document.cookie is a string, using split() function to get cookie date in array form

20、 var arr= document.cookie.split('|');

21、 var cookie_info='Data in cookie:<br>username is:'+arr[0]+"<br>password is:"+arr[1]+'<br>';

22、//set content of element of id"res"

23、 document.getElementById("res").innerHTML= cookie_info;

24、<button onclick="showCookie()">Show Cookie</button>

25、点击show Cookie按钮就会显示cookie里面的信息了。

26、下面，我们将会在本地和服务器上分别跑这个程序，分别在IE浏览器和Chrome浏览器上运行这个程序，看看cookie的运行情况。

27、首先我们在本地运行这个程序，我们将上述两个文件都放在E盘中。先在IE浏览器上运行，在createCookie.html页面上输入信息，并点击submit按钮，截图如下：

28、跳转到showCookie.html页面后，点击show Cookie按钮，页面截图如下：

29、cookie在本地环境中的IE浏览器中运行正常。

30、接下来，我们看看在Chrome浏览器中运行情况，首先在Chrome浏览器中打开createCookie.html页面，输入信息，并点击submit按钮，截图如下：

31、跳转到showCookie.html页面后，点击show Cookie按钮，页面截图如下：

32、同样的程序，这次cookie在Chrome浏览器中却运行失败了。

33、接着让我们在服务器中运行这个程序，需要用到xampp,并打开Apache服务器，将上述两个html文件放在xampp安装文件夹下的htdocs文件夹下（具体的操作方法可以参考这篇博客：JavaScript之使用AJAX（适合初学者））。我们现在IE浏览器中运行该程序，在IE浏览器中输入网址：...：

34、点击Submit按钮，跳转到showCookie.html页面，并点击show Cookie按钮，截图如下：

35、然后我们在Chrome浏览器中输入网址：...：

36、点击Submit按钮，跳转到showCookie.html页面，并点击show Cookie按钮，截图如下：

37、这次在服务器环境下，IE浏览器和Chrome浏览器的cookie都运行正常！

38、上面是我整理给大家的，希望今后会对大家有帮助。

39、在vue中scroller返回页面并且记住滚动位置如何实现

40、vue+springboot如何实现单点登录跨域问题（详细教程）

二、JS 操作 cookies 的方法

1、在 JS(JavaScript)操作cookies比较复杂，在 ASP里面我们只需要知道 cookie的名称、cookie的值就行了，而 JS里面，我们面对的是 cookie的字符串，你自己编写这个字符串写入客户端，然后自己解析这个字符串。

2、var the_date= new Date("December 31, 2020");

3、var expiresDate= the_date.toGMTString();

4、document.cookie="userDefineCSS="+ escape(title)+"; expires="+ expiresDate;

5、第二句将日期格式转换成 GMT格式；编者者： GMT即格林威治标准时间，现在也称 UTC即全球标准时间。

6、第三句是将 cookie内容写入客户端。

7、其中 expires是系统使用的，表示 cookie的失效日期（也可以省略），expires不可读。

8、 escape是对 cookie值进行编码，这是为了处理中文、空格等而设立的。

9、var cookieStr= document.cookie;//取 cookie字符串，由于 expires不可读，所以 expires将不会出现在 cookieStr中。

10、return"main1";//没有取到 cookie字符串，返回默认值

11、var cookieValue= cookieStr.split(";");//将各个 cookie分隔开，并存为数组，多个 cookie之间用分号加空隔隔开，不过前面我们只使用了一个 cookie，它的值与 expires之间也是用分号加空格隔开的

12、for(var i=0; i<cookieValue.length; i++)

13、startPos= cookieValue[i].indexOf(varName);

14、continue;//当前 cookie不是名称为 varName的 cookie，判断下一个 cookie

15、startPos+= varName.length+ 1;//当前 cookie就是名称为 varName的 cookie，由于有等号，所以+1

16、endPos= cookieValue[i].length;

17、var css= unescape(cookieValue[i].substring(startPos, endPos));

三、js简单设置与使用cookie的方法

JS简单设置与使用Cookie的方法：

使用`document.cookie`属性可以设置cookie。例如：`document.cookie="username=John";`这将创建一个名为"username"、值为"John"的cookie。

可以通过`document.cookie`属性读取已存在的cookie。例如，要读取名为"username"的cookie的值，可以使用以下代码：`var username= document.cookie;`。请注意，这需要解析cookie字符串来找到特定的值。

要删除一个cookie，可以设置其过期时间为过去的时间。例如，要删除名为"username"的cookie，可以将其过期时间设置为一个过去的时间点：`document.cookie="username=; expires=Thu, 01 Jan 1970 00:00:00 UTC;";`。

在JavaScript中，可以通过直接操作`document.cookie`属性来设置cookie。这是一个字符串，可以包含多个键值对，每个键值对表示一个cookie。例如，`document.cookie="username=John; expires=Fri, 31 Dec 2023 23:59:59 UTC; path=/"`会创建一个名为"username"、值为"John"、有效期至2023年12月31日并且路径为根路径的cookie。其中，expires属性表示过期时间，path属性表示cookie的路径。当不设置这些属性时，默认行为可能会有所不同，取决于浏览器的实现。

要读取已存在的cookie的值，可以使用`document.cookie`属性并配合字符串操作函数来解析返回的字符串。因为`document.cookie`返回的是所有cookie的字符串形式，所以需要手动解析出需要的值。如果没有找到特定的cookie名称，返回的字符串可能不包含该名称的信息。

删除cookie的原理是将其过期时间设置为过去的时间点，使得浏览器认为它已经过期并被自动删除。要注意的是，并非所有浏览器都会在设置过期时间后立即删除数据；在某些情况下，即使设置了过期时间，浏览器也可能仍然保留数据一段时间。因此在实际应用中可能需要额外的逻辑来处理这种情况。同时，如果cookie被设置为secure或httpOnly，使用JavaScript删除它可能无法实现。这就需要通过服务器端的设置来完成操作。所以在实践中要确保考虑了所有这些方面的情况和可能的边界情况。