Javascript操作cookie
介绍Javascript操作cookie之前有必要先介绍下----ECMAScript中的几种编码方式：
有以下几对编码与解码的方法：
1、encodeURI()和decodeURI()
2、encodeURIComponent()和decodeURIComponent()
3、escape()和unescape()---已被ECMA-262第三版废弃，但目前浏览器仍支持。
Global对象的encodeURI()和encodeURIComponent()方法可以对URI进行编码，以便发送给浏览器。因为有效的URI不能包含某些特殊字符，例如空格。而这两个URI编码方法就可以对URI进行编码，它们用特殊的UTF-8编码替换所有无效的字符，从而让浏览器能够接受和理解。
encodeURI()不会对本身属于URI的特殊字符进行编码，例如冒号、正斜杠、问号、井号；而encodeURIComponent()则会对它发现的任何非标准字符进行编码。来看一个例子：
var uri="http://www.wrox.com/illegal value.htm#start";
//"http://www.wrox.com/illegal%20value.htm#start"
alert(encodeURI(uri));
//"http%3A%2F%2Fwww.wrox.com%2Fillegal%20value.htm%23start"
alert(encodeURIComponent(uri))
换句话说，使用encodeURI()编码后的结果是除了空格之外的其他字符都不动，只有空格被替换成了%20，而使用encodeURIComponent()方法则会使用对应的UTF-8编码替换所有的非字母数字的字符。所以，通常我们可以使用encodeURI()对整个URI进行编码，而使用encodeURIComponent()对基础URI后面的查询字符串进行编码。
一般来说，我们使用encodeURIComponent()方法的时候要比使用encodeURI()更多，因为在实际开发中更常见的是对查询字符串参数而不是对基础URI进行编码。
与encodeURI()和encodeURIComponent()方法相对应的是decodeURI()和decodeURIComponent()方法，它们必须要对应使用才能保证正确的解码。
URI方法encodeURI()、encodeURIComponent()、decodeURI()和decodeURIComponent()用于替代已被ECMA-262第三版废弃的escape()和unescape()方法。URI方法能够编码所有的Unicode字符，而原来的方法只能正确的编码ASCII字符，因此，在实际开发中，尤其是在产品级的代码中，一定要使用URI方法，不要使用escape()和unescape()方法。
-------本文内容来自《高三》P131
下面的开始正文：
function setCookie(NameOfCookie, value, expiredays)
{
var ExpireDate = new Date ();
ExpireDate.setTime(ExpireDate.getTime() + (expiredays * 24 * 3600 * 1000));
document.cookie = NameOfCookie + "=" + escape(value) + ((expiredays == null) ? "" : "; expires=" + ExpireDate.toGMTString());
}
function getCookie(NameOfCookie)
{
if (document.cookie.length > 0)
{
begin = document.cookie.indexOf(NameOfCookie+"=");
if (begin != -1)
{
begin += NameOfCookie.length+1;
end = document.cookie.indexOf(";", begin);
if (end == -1) end = document.cookie.length;
return unescape(document.cookie.substring(begin, end));
}
}
return null;
}
function delCookie (NameOfCookie)
{
var expires = new Date();
expires.setTime(expires.getTime() - 1);
if (getCookie(NameOfCookie))
{
document.cookie = NameOfCookie + "=" + "; expires="+expires.toGMTString();
}
}
//-------------------------------------URI方法编码-------------------------------------------
var cookieUtil = (function () {
function getCookie(name) {
var cookieName = encodeURIComponent(name) + "=",
cookieStart = document.cookie.indexOf(cookieName),
cookieValue = null;
if (cookieStart > -1) {
var cookieEnd = document.cookie.indexOf(";", cookieStart);
if (cookieEnd == -1) {
cookieEnd = document.cookie.length;
}
cookieValue = encodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
}
return cookieValue;
}
function setCookie(name, value, expires, path, domain, secure) {
var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value);
if (expires instanceof Date) {
cookieText += ";expires=" + expires.toGMTString();
}
if (path) {
cookieText += ";path=" + path;
}
if (domain) {
cookieText += ";domain=" + domain;
}
if (secure) {
cookieText += ";secure";
}
document.cookie = cookieText;
}
function delCookie(name, path, domain, secure) {
setCookie(name, "", new Date(0), path, domain, secure);
}
return {
get: getCookie,
set: setCookie,
del: delCookie
}
})();
//-------------------------------------操作Cookie字典-------------------------------------------
var SubCookieUtil = {
get: function (name, subName) {
var subCookies = this.getAll(name);
if (subCookies) {
return subCookies[subName];
}
else {
return null;
}
},
getAll: function (name) {
var cookieName = encodeURIComponent(name) + "=",
cookieStart = document.cookie.indexOf(cookieName),
cookieValue = null,
cookieEnd, subCookies, i, len, parts, result = {};
if (cookieStart > -1) {
cookieEnd = document.cookie.indexOf(";", cookieStart);
}
if (cookieEnd == -1) {
cookieEnd = document.cookie.length;
}
cookieValue = document.cookie.substring(cookieStart + cookieName.length, cookieEnd);
if (cookieValue.length > 0) {
subCookies = cookieValue.split('&');
for (i = 0, len = subCookies.length; i < len; i++) {
parts = subCookies[i].split('=');
result[decodeURIComponent(parts[0])] = decodeURIComponent(parts[1]);
}
return result;
}
return null;
},
set: function (name, subName, value, expires, path, domain, secure) {
var subCookies = this.getAll(name) || {};
subCookies[subName] = value;
//更新cookie
this.setAll(name, subCookies, expires, path, domain, secure);
},
setAll: function (name, subcookies, expires, path, domain, secure) {
var cookieText = encodeURIComponent(name) + "=",
subcookieParts = new Array(),
subName;
for (subName in subcookies) {
if (subName.length > 0 && subcookies.hasOwnProperty(subName)) {
subcookieParts.push(encodeURIComponent(subName) + "=" + encodeURIComponent(subcookies[subName]));
}
}
if (subcookieParts.length > 0) {
cookieText += subcookieParts.join('&');
if (expires instanceof Date) {
cookieText += ";expires=" + expires.toGMTString();
}
if (path) {
cookieText += ";path=" + path;
}
if (domain) {
cookieText += ";domain=" + domain;
}
if (secure) {
cookieText += ";secure";
}
}
else {
cookieText += ";expires=" + (new Date(0)).toGMTString(); //如果子cookie为空，则设置此cookie为过期
}
document.cookie = cookieText;
},
del: function (name, subName, path, domain, secure) {
var subCookies = this.getAll(name);
if (subCookies) {
//删除cookie数组中指定的cookie
delete subCookies[subName];
//更新cookie
this.setAll(name, subCookies, null, path, domain, secure);
}
},
delAll: function (name, path, domain, secure) {
//设置cookie过期
this.setAll(name, null, new Date(0), path, domain, secure);
}
}
-------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="CookieUtil.js" ></script>
<script type="text/javascript">
function btn1_click() {
cookieUtil.set("MyCookie2","Wede.Zhao2",new Date(2017,10,1));
//setCookie("MyCookie1","Wede.Zhao",1);
alert(document.cookie.length);
}
function btn2_click() {
var c=cookieUtil.get("MyCookie2");
alert(c);
}
function btn3_click() {
cookieUtil.del("MyCookie2");
}
</script>
</head>
<body>
<div id="div1"><input type="button" id="btn1" onclick="btn1_click()" value="写入cookie"/></div>
<div id="div2"><input type="button" id="btn2" onclick="btn2_click()" value="读取cookie"/></div>
<div id="div3"><input type="button" id="btn3" onclick="btn3_click()" value="删除cookie"/></div>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 通过 API 将Deepseek响应流式内容输出到前端