-
• js-cookie
-
• 安装：
-
• 引用并使用：
-
• 设置（创建或更新）Cookie：
-
• 获取Cookie：
-
• 删除Cookie：
-
• API示例：
-
• 设置带过期时间的Cookie：
-
• 处理JSON对象（自动序列化和反序列化）：
-
• 如何使用 js-cookie：
-
• cookie和localstorage的区别与联系
-
js-cookie 是一个开源的 JavaScript 库，设计用于简化在浏览器环境中对 Cookie 的操作。这个库提供了一套简洁的 API，使得开发者能够更容易地进行 Cookie 的读取、写入和删除操作。
安装：
-
• 使用 npm（Node Package Manager）安装，适合于基于模块化的项目：
npm install js-cookie --save -
• 或者直接通过
<script>标签引入 CDN（Content Delivery Network）链接到你的 HTML 文件中：<script src="https://cdn.jsdelivr.net/npm/js-cookie@version_number/dist/js.cookie.min.js"></script>
引用并使用：
-
• 在模块化项目中引用：
import Cookies from 'js-cookie'; -
• 使用
Cookies对象的基本方法：
设置（创建或更新）Cookie：
Cookies.set('key', 'value'); // 设置一个名为 "key" 的 Cookie，其值为 "value"
Cookies.set('key', 'value', { expires: 7 }); // 设置有效期为7天
Cookies.set('key', 'value', { path: '/' }); // 设置路径为整个网站
// 可以添加更多选项如 domain, secure, sameSite 等获取Cookie：
const value = Cookies.get('key'); // 获取名为 "key" 的 Cookie 的值删除Cookie：
Cookies.remove('key'); // 删除名为 "key" 的 CookieAPI示例：
设置带过期时间的Cookie：
Cookies.set('username', 'John Doe', { expires: 7 }); // 这个Cookie将在7天后过期处理JSON对象（自动序列化和反序列化）：
const user = { id: 123, name: 'Jane' };
Cookies.set('user', user); // 自动转换为字符串存储
const storedUser = Cookies.get('user'); // 自动解析为对象总之，js-cookie 提供了一个跨浏览器兼容且易于使用的接口来处理 Cookie，避免了原生 JavaScript 操作 Cookie 时可能遇到的一些复杂性和兼容性问题。
Cookie 和 LocalStorage 都是用来在浏览器端存储数据的技术，但它们在用途、特性和限制上有显著的不同：
区别：
-
1. 存储容量：
-
• Cookie：每个 Cookie 的大小通常限制在 4KB 左右。
-
• LocalStorage：可以存储更大容量的数据，通常上限为 5MB 或以上（实际容量根据浏览器的具体实现而有所不同）。
-
2. 数据传输：
-
• Cookie：每次 HTTP 请求都会自动随请求头发送到服务器，这包括页面加载和Ajax请求等。
-
• LocalStorage：数据存储在本地浏览器，不随 HTTP 请求发送到服务器，仅在客户端（浏览器）内部使用。
-
3. 过期机制：
-
• Cookie：可以设置具体的过期时间，到期后浏览器会自动删除该 Cookie。
-
• LocalStorage：没有内置的过期机制，数据会永久保存，除非通过代码手动清除或者用户清理浏览器缓存及本地存储。
-
4. 安全性和隐私：
-
• Cookie：由于经常在网络请求中传输，因此有时包含敏感信息时需加密，而且可以通过 HTTPOnly 标志防止脚本访问以增强安全性。
-
• LocalStorage：虽然数据不随请求发送，但如果站点受到 XSS 攻击，存储在 LocalStorage 中的数据仍然可能暴露。
-
5. 作用域：
-
• Cookie：可以在不同的子域名间共享（取决于其 domain 属性设置）。
-
• LocalStorage：在同源策略范围内（协议+域名+端口相同）的所有页面都可以访问同一份 LocalStorage 数据。
-
6. 事件通知：
-
• Web Storage（包括 LocalStorage 和 SessionStorage）支持事件通知机制，当数据改变时，可以触发相应事件。
联系：
-
1. 同源性：
-
• Cookie 和 LocalStorage 都遵循同源策略，即只能由同一来源的页面访问相应的数据。
-
2. 持久化存储：
-
• 都是浏览器提供的持久化存储方案，可用于保存用户的偏好设置、登录状态、主题选择等非敏感信息。
-
3. JavaScript 访问：
-
• 两者都可通过 JavaScript API 进行读取、写入和删除操作。
-
4. 应用场景：
-
• Cookie 主要用于识别用户会话、保持登录状态、个性化设置等场景，并且由于其在网络请求中的特性，常常用于服务器端的状态管理。
-
• LocalStorage 则更适合于在客户端存储不需要发送到服务器的大量应用数据，比如离线缓存、游戏进度、网页应用的配置信息等。
原文始发于微信公众号（前端爱好者）：什么是 js-cookie ，如何使用
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/267094.html
