做开发时会时不时的用到cookie来保存数据，比如常见的登录页面的username和password，那么html页面中怎么去操作cookie呢？

设置与获取cookie

其实最简单的对cookie的操作就是document.cookie='username=TestUser'(设置cookie)，取值时用document.cookie(获取cookie)就可以了

<button onclick="document.cookie='username=kkkkk'">创建cookie1</button>
<button onclick="document.cookie='age=12'">创建cookie2</button>
<button onclick="alert(document.cookie)">显示cookie</button>

设置cookie时的参数

- cookie的name和value，实际上就是一个字符串，例如：username='kk'
- ;path：可以获取到此cookie的路径，例如："/"、"/dir"
- ;domain：域名 默认为当前文档位置的路径的域名部分。例如："test.com"、"blog.csdn.net"
- ; expires：cookie的过期时间，如果不定义则cookie在会话结束(关闭网页)时失效，需要GMT格式，可以使用toGMTString()函数来做格式化，例如：new Date().toGMTString()；
- ;secure ：cookie是否只通过https协议传输

注意

这里有一点需要注意的是，在测试的时候发现谷歌浏览器、新版的Microsoft Edge、QQ浏览器,在打开本地html文件的时候无法获取cookie，能不能储存我没有去深究，但不能获取就是有问题了，上网找了一下，好像是需要部署到服务器或者使用开发工具打开，让它具有一个服务器环境才行，Firefox可以直接使用，上述代码就是在Firefox中测试的。

修改cookie

修改cookie其实只要重新赋值就可以，或者说重新创建名字相同的cookie就好。

<button onclick="document.cookie='username=kk'">创建cookie1</button>
<button onclick="document.cookie='username=xx'">修改cookie1</button>
<button onclick="alert(document.cookie)">显示cookie</button>

如上所示，在点击修改一次后，再次点击“创建cookie1”时，cookie的值就被再次修改，所以，cookie的创建和修改的方式是相同的。

删除cookie

上面说过cookie是有过期时间的，如果不设置过期时间，则cookie会在会话结束时自动删除，所以同时也说明没有真的永久的cookie，只有相对永久，比如我们把过期时间设置为9999年1月1日，那么相对来说，这就是一个永久的cookie；
删除cookie，只要把cookie的过期时间修改为已经过去的时间，让cookie失效，那么就是删除了cookie；修改上面已经说过，其实就是从新给cookie赋值，那么删除其实也就是同样的道理了，重新赋值并把失效时间设置为已经过去的时间就是删除cookie

<button onclick="document.cookie='username=kk'">创建cookie</button>
<!-- 现在是：2020年2月18日14:15:17 -->
<button onclick="document.cookie='username=kk;expires=Fri, 31 Dec 2019 23:59:59 GMT'">删除cookie</button>
<button onclick="alert(document.cookie)">显示cookie</button>

获取指定的cookie值

在第一个GIF中我们可以看到，当cookie有多个值得时候，获取到的值是用";"连接每个cookie值的字符串，所以，我们完全可以使用var cookieArr = document.cookie.split("; ")来分割获取到的字符串获得字符串数组，然后遍历数组，来得到指定的值；
或者用网上更多的经过简单封装的正则的方式

function getCookie(name){var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");if (arr = document.cookie.match(reg)){return (arr[2]);}else{return null;}
}

Cookie封装

不过，在写这篇文章时，在MDN的技术文档中找到了一个经过封装的cookie方法，可以拿过来直接用，各个参数的解释也都有，不需要自己去摸索了。

/*\
|*|
|*|  :: cookies.js ::
|*|
|*|  A complete cookies reader/writer framework with full unicode support.
|*|
|*|  https://developer.mozilla.org/en-US/docs/DOM/document.cookie
|*|
|*|  This framework is released under the GNU Public License, version 3 or later.
|*|  http://www.gnu.org/licenses/gpl-3.0-standalone.html
|*|
|*|  Syntaxes:
|*|
|*|  * docCookies.setItem(name, value[, end[, path[, domain[, secure]]]])
|*|  * docCookies.getItem(name)
|*|  * docCookies.removeItem(name[, path], domain)
|*|  * docCookies.hasItem(name)
|*|  * docCookies.keys()
|*|
\*/var docCookies = {getItem: function (sKey) {return decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(sKey).replace(/[-.+*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) || null;},setItem: function (sKey, sValue, vEnd, sPath, sDomain, bSecure) {if (!sKey || /^(?:expires|max\-age|path|domain|secure)$/i.test(sKey)) { return false; }var sExpires = "";if (vEnd) {switch (vEnd.constructor) {case Number:sExpires = vEnd === Infinity ? "; expires=Fri, 31 Dec 9999 23:59:59 GMT" : "; max-age=" + vEnd;break;case String:sExpires = "; expires=" + vEnd;break;case Date:sExpires = "; expires=" + vEnd.toUTCString();break;}}document.cookie = encodeURIComponent(sKey) + "=" + encodeURIComponent(sValue) + sExpires + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "") + (bSecure ? "; secure" : "");return true;},removeItem: function (sKey, sPath, sDomain) {if (!sKey || !this.hasItem(sKey)) { return false; }document.cookie = encodeURIComponent(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT" + ( sDomain ? "; domain=" + sDomain : "") + ( sPath ? "; path=" + sPath : "");return true;},hasItem: function (sKey) {return (new RegExp("(?:^|;\\s*)" + encodeURIComponent(sKey).replace(/[-.+*]/g, "\\$&") + "\\s*\\=")).test(document.cookie);},keys: /* optional method: you can safely remove it! */ function () {var aKeys = document.cookie.replace(/((?:^|\s*;)[^\=]+)(?=;|$)|^\s*|\s*(?:\=[^;]*)?(?:\1|$)/g, "").split(/\s*(?:\=[^;]*)?;\s*/);for (var nIdx = 0; nIdx < aKeys.length; nIdx++) { aKeys[nIdx] = decodeURIComponent(aKeys[nIdx]); }return aKeys;}
};

方法及参数解释:

html页面怎么保存和读取cookie 推荐MDN封装的cookie方法相关推荐

python读取wps表格文件显示到动态页面中_Python实现读取txt文件并转换为excel的方法示例...
{"moduleinfo":{"card_count":[{"count_phone":1,"count":1}],&q ...
Cookie获取、保存与读取
为什么要使用Cookie呢? Cookie,指某些网站为了辨别用户身份.进行session跟踪而储存在用户本地终端上的数据(通常经过加密) 比如说有些网站需要登录后才能访问某个页面,在登录之前,你想抓 ...
通过cookie保存并读取用户登录信息
浏览器将cookie以key/value的形式保存到客户机的某个指定目录通过cookie的getCookies()方法可获取所有cookie对象的集合通过cookie对象的getName()方法可 ...
通过cookie保存并读取用户登录信息实例
通过cookie的getCookies()方法可获取所有cookie对象的集合:通过getName()方法可以获取指定的名称的cookie:通过getValue()方法获取到cookie对象的值.另外 ...
php读取cookie文件,PHP读取CURL模拟登录时生成Cookie文件的方法，_PHP教程
PHP读取CURL模拟登录时生成Cookie文件的方法, 本文实例讲述了PHP读取CURL模拟登录时生成Cookie文件的方法.分享给大家供大家参考.具体实现方法如下: 在使用PHP中的CURL模拟登 ...
javaweb：会话管理和保存会话数据的两种技术（Cookie、Session）
会话: •会话可简单理解为:用户开一个浏览器,点击多个超链接,访问服务器多个web资源,然后关闭浏览器,整个过程称之为一个会话. 会话过程中要解决的一些问题? •每个用户与服务器进行交互的过程中,各自 ...
模型数据的保存和读取
1,基本内容目的是将模型数据以文件的形式保存到本地. 使用神经网络模型进行大数据量和复杂模型训练时,训练时间可能会持续增加,此时为避免训练过程出现不可逆的影响,并验证训练效果,可以考虑分段进行,将训 ...
【OpenCV 4开发详解】保存和读取XML和YMAL文件
本文首发于"小白学视觉"微信公众号,欢迎关注公众号本文作者为小白,版权归人民邮电出版社发行所有,禁止转载,侵权必究! 经过几个月的努力,小白终于完成了市面上第一本OpenCV 4 ...
sklearn与pytorch模型的保存与读取
当我们花了很长时间训练了一个模型,需要用该模型做其他事情(比如迁移学习),或者我们想把自己的机器学习模型分享出去的时候,我们这时候需要将我们的ML模型持久化到硬盘中去. 1.sklearn中模型的保存 ...

html页面怎么保存和读取cookie 推荐MDN封装的cookie方法