js -cookie的操作

简介: cookie是存储在客户端浏览器中的一段文本信息。
  1. cookie是存储在客户端浏览器中的一段文本信息。
  2. 每一个 HTTP 请求都会在请求头中携带 cookie 到服务端
  3. 每一个 HTTP 响应都会在响应头中携带 cookie 到客户端

cookie的特点

  1. 存储大小有限制,一般是 4 KB 左右
  2. 数量有限制,一般是 50 条左右
  3. 有时效性,也就是有过期时间,一般是 会话级别(也就是浏览器关闭就过期了)
  4. 有域名限制,也就是说谁设置的谁才能读取
  5. 存在风险

cookie的创建

document.cookie = 'key=value;expires=日期对象;path=路径;domain=域名;secure'

  1. 浏览器不识别的编码问题
    1. 编码:encodeURIComponent()
    2. 解码:decodeURIComponent()
  下面是一个简单的封装函数,用于设置、获取和删除 Cookie:

javascript
// 设置 Cookie
function setCookie(name, value, expires, path) {
  var cookieString = name + '=' + encodeURIComponent(value);

  if (expires) {
    var date = new Date();
    date.setTime(date.getTime() + (expires * 24 * 60 * 60 * 1000));
    cookieString += '; expires=' + date.toUTCString();
  }

  if (path) {
    cookieString += '; path=' + path;
  }

  document.cookie = cookieString;
}

// 获取 Cookie
function getCookie(name) {
  var cookieName = name + '=';
  var cookies = document.cookie.split(';');

  for (var i = 0; i < cookies.length; i++) {
    var cookie = cookies[i].trim();

    if (cookie.indexOf(cookieName) === 0) {
      return decodeURIComponent(cookie.substring(cookieName.length));
    }
  }

  return null;
}

// 删除 Cookie
function deleteCookie(name) {
  setCookie(name, '', -1);
}
使用示例:

javascript
// 设置 Cookie
setCookie('username', 'john', 7, '/');

// 获取 Cookie
var username = getCookie('username');
console.log('Username:', username);

// 删除 Cookie
deleteCookie('username');
这个封装函数提供了 setCookie()、getCookie() 和 deleteCookie() 三个函数来进行 Cookie 的设置、获取和删除操作。

setCookie(name, value, expires, path): 设置 Cookie。name 是要设置的 Cookie 名称,value 是要设置的 Cookie 值,expires 是可选参数,表示 Cookie 的过期时间(以天为单位),path 是可选参数,表示可访问该 Cookie 的路径,默认为根目录。

getCookie(name): 获取 Cookie。name 是要获取的 Cookie 名称,返回获取到的 Cookie 值,如果找不到则返回 null。

deleteCookie(name): 删除 Cookie。name 是要删除的 Cookie 名称,将该 Cookie 的值设置为空字符串,并将过期时间设置为过去的时间。

使用这些封装函数可以方便地进行 Cookie 的操作,包括设置、获取和删除。
相关文章
|
27天前
|
缓存 JavaScript 前端开发
JavaScript中DOM操作:新手常犯错误与避免策略
【4月更文挑战第1天】本文介绍了JavaScript中DOM操作的基础和新手常犯错误,包括频繁查询DOM、不恰当的遍历、滥用innerHTML、忽视异步与DOM状态以及过度同步更新。建议包括缓存DOM引用、注意文本节点、慎用innerHTML以防止XSS、正确处理异步和批量更新。遵循最佳实践,开发者能提升代码质量和应用性能。
24 2
|
2月前
|
JavaScript 前端开发
JavaScript操作DOM元素
JavaScript操作DOM元素
12 1
|
2月前
|
JavaScript 前端开发
如何使用 JavaScript 操作 DOM?
如何使用 JavaScript 操作 DOM?
16 0
|
2月前
|
移动开发 前端开发 JavaScript
编程笔记 html5&css&js 005 网页上都有哪内容、形式和操作
编程笔记 html5&css&js 005 网页上都有哪内容、形式和操作
|
3月前
|
JavaScript 数据处理
JS 取整,取余操作
JS 取整,取余操作
|
4天前
|
JavaScript 前端开发
js 操作数组的方法
js 操作数组的方法
14 4
|
8天前
|
JavaScript 前端开发 UED
深入解析JavaScript原生操作DOM技术
【4月更文挑战第22天】本文深入探讨JavaScript原生DOM操作技术,包括使用`getElement*`方法和CSS选择器获取元素,借助`createElement`与`appendChild`动态创建及插入元素,修改元素内容、属性和样式,以及删除元素。通过掌握这些技术,开发者能实现页面动态交互,但应注意避免过度操作DOM以优化性能和用户体验。
|
13天前
|
存储 JavaScript 前端开发
JavaScript中的cookie、localStorage的区别和特点
JavaScript中的cookie、localStorage的区别和特点
19 6
|
15天前
|
存储 JavaScript 前端开发
JavaScript DOM 操作:解释一下 cookie、sessionStorage 和 localStorage 的区别。
Cookie是服务器发送至客户端的文本信息,会随每个请求发送回服务器,适合控制会话状态但可能暴露隐私。SessionStorage仅在当前会话中存储数据,关闭浏览器后清除,适合临时存储如登录状态。LocalStorage则持久保存数据,即使关闭浏览器也不会清除,适用于存储长期设置。三种方式各有侧重,应按需求选择。
16 0
|
15天前
|
JavaScript 前端开发 安全
JavaScript DOM 操作:解释一下浏览器的同源策略。
**同源策略**是浏览器安全基石,它阻止脚本跨不同协议、域名或端口访问资源,防止恶意行为。例如,HTTP页面无法直接用JS获取HTTPS页面内容。**CORS**允许跨域请求,但需服务器配合设置,通过`document.domain`属性可配置,但仍受限于服务器配置。
15 4