javascript cookie用法基础教程(概念,设置,读取及删除)

本文实例讲述了javascript cookie用法。分享给大家供大家参考，具体如下： 一、什么是 cookie？ cookie 就是页面用来保存信息，比如自动登录、记住用户名等等。 二、cookie 的特点 同个网站中所有的页面共享一套 cookie cookie 有数量、大小限制 cookie 有过期时间 三、如何使用 cookie？ 通过 [removed] 来写入 cookie &lt;!DOCTYPE HTML> &lt;html lang="en-US"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;cookie基础&lt;/title&gt; &lt;/head JavaScript Cookie 是一种在客户端存储数据的技术，常用于保持用户状态，如自动登录、记住用户名等。Cookie 是由服务器端设置，然后由浏览器在每次请求页面时自动发送回服务器的小型文本数据。 一、Cookie 概念 Cookie 主要用于在用户浏览器与服务器之间传递信息。当用户访问一个网页时，服务器可以通过设置响应头中的 `Set-Cookie` 字段创建 Cookie。这些数据存储在用户的浏览器中，以便在后续请求同一网站的其他页面时，浏览器会自动将该 Cookie 发送到服务器。Cookie 可用于跟踪用户行为、存储用户偏好设置或实现会话管理。 二、Cookie 特点 1. **共享性**：同一网站的所有页面都能访问同一套 Cookie。 2. **数量和大小限制**：每个域名下的 Cookie 数量有限，并且每个 Cookie 的大小不能超过4KB。不同浏览器的具体限制可能有所不同。 3. **过期时间**：Cookie 可以设置过期时间，过期后将自动删除。若未指定过期时间，则关闭浏览器时删除。 三、使用 JavaScript 设置、读取和删除 Cookie 设置 Cookie 使用 `document.cookie` 属性。例如： ```javascript document.cookie = 'username=abc'; document.cookie = 'password=123'; document.cookie = 'email=abcdef@123.com'; ``` 设置过期时间可使用 `expires` 参数，通常结合 `Date` 对象来实现： ```javascript var d = new Date(); d.setTime(d.getTime() + 1 * 3600 * 1000); document.cookie = 'username=abc; expires=' + d.toGMTString(); ``` 读取 Cookie： 由于 `document.cookie` 是一个包含所有 Cookie 的字符串，所以需要解析这个字符串来获取特定的值。以下是一个简单的解析函数： ```javascript function getCookie(name) { var arr = document.cookie.split('; '); for (var i = 0; i < arr.length; i++) { var temp = arr[i].split('='); if (temp[0] === name) { return temp[1]; } } return ''; } ``` 删除 Cookie： 删除 Cookie 的方法是将其过期时间设置为过去的时间： ```javascript function removeCookie(name) { var d = new Date(); d.setTime(d.getTime() - 10000); document.cookie = name + '=1; expires=' + d.toGMTString(); } ``` 四、封装 Cookie 操作 为了便于使用，我们可以将这些操作封装成一个库，如 `cookie.js`： ```javascript function setCookie(name, value, hours) { var d = new Date(); d.setTime(d.getTime() + hours * 3600 * 1000); document.cookie = name + '=' + value + '; expires=' + d.toGMTString(); } function getCookie(name) { // 上述解析代码 } function removeCookie(name) { // 上述删除代码 } ``` 通过这种方式，我们可以更方便地在代码中管理 Cookie。 总结，JavaScript Cookie 是一个实用的工具，它允许网站在客户端持久地存储少量数据，实现跨页面的数据共享和用户状态管理。通过理解其基本概念、特点以及如何操作，开发者可以有效地利用 Cookie 来优化用户体验。然而，考虑到隐私和安全问题，应当谨慎使用 Cookie，避免存储敏感信息，并遵循相关的隐私政策。