"Cookies与localStorage：前端数据存储的选择与应用场景比较"
一.Cookies（Cookie）：
- 定义: Cookies是存储在浏览器中的小段数据，通常用于存储用户的会话信息或者网站的状态信息。
- 格式: Cookies以键值对（
key=value）的形式存储，可以附带属性如expires（过期时间）、path（路径）、domain（域名）等。 - 域名特定: 每个Cookie与特定的域名相关联，会随着每次HTTP请求一同发送到对应的域名。
- JavaScript API: 可以通过
document.cookie来访问和操作Cookie。 - 功能: 常用于存储用户会话、认证令牌等状态信息。
- 过期处理: 可以设置过期时间（
expires），或者设为会话Cookie（浏览器关闭时删除）。
二.localStorage：
- 定义: localStorage是Web存储API的一部分，允许网站在浏览器中持久性地存储数据。
- 存储容量: 通常比Cookie大，每个域名最多可存储约5MB的数据。
- 数据格式: localStorage以键值对的形式存储数据，支持存储JavaScript对象。
- 用途: 适合存储较大量的数据，如用户偏好设置、缓存数据等。
- 作用域: localStorage中的数据在用户不清除浏览器数据的情况下会持久保存。
三.差异和应用场景：
- 数据类型: Cookies存储字符串，而localStorage存储序列化的JavaScript对象。
- 存储限制: Cookies每个域名限制为4KB，而localStorage每个域名限制为约5MB。
- 用途: Cookies通常用于会话管理、跟踪和身份验证，而localStorage用于存储应用程序数据、用户偏好设置和缓存数据等。
- 行为: 每次HTTP请求都会携带Cookies，会略微影响性能；而localStorage的数据不会自动发送到服务器。
- 过期处理: Cookies可以设置具体的过期时间，用于管理会话状态；localStorage中的数据除非被删除，否则会一直保存。
四.实现实例：
- cookies:
/**
* CookieManager cookie 处理类
*
*/
//登入
//cookie有点难打理，痛苦一次，封装一下
class CookieManager {
constructor() {
this.cookie = document.cookie;
}
//es6 函数默认参数值
setCookie(name,value,expires=7) {
let expiresDate = ''
if (expires) {
const date = new Date();//当前时间
// console.log(date.getTime());
date.setTime(date.getTime() + (expires * 24 * 60 * 60 * 1000));
// console.log(date, date.getTime());
// date.setDate(date.getDate() + expires);
console.log(date.toUTCString());
expiresDate = `;expires=${date.toUTCString()}`;
}
document.cookie = `${name}=${value}${expiresDate}` + ";path=/";
}
getCookie(){
}
deleteCookie(name) {
this.setCookie(name,'',-1);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>前端存储之Cookie</title>
</head>
<body>
<!-- <a href="./page2.html">Page</a> -->
<script src="./cookie.js">
</script>
<script>
const cookieHandler = new CookieManager();
cookieHandler.setCookie('username','libai',30)
cookieHandler.setCookie('uid','666');
</script>
</body>
</html>
-
效果图：
-
localStorage:
/**
* CookieManager cookie 处理类
*
*/
//登入
//cookie有点难打理，痛苦一次，封装一下
class CookieManager {
constructor() {
this.cookie = document.cookie;
}
//es6 函数默认参数值
setCookie(name,value,expires=7) {
let expiresDate = ''
if (expires) {
const date = new Date();//当前时间
// console.log(date.getTime());
date.setTime(date.getTime() + (expires * 24 * 60 * 60 * 1000));
// console.log(date, date.getTime());
// date.setDate(date.getDate() + expires);
console.log(date.toUTCString());
expiresDate = `;expires=${date.toUTCString()}`;
}
document.cookie = `${name}=${value}${expiresDate}` + ";path=/";
}
getCookie(){
}
deleteCookie(name) {
this.setCookie(name,'',-1);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>前端存储之Cookie</title>
</head>
<body>
<!-- <a href="./page2.html">Page</a> -->
<script src="./cookie.js">
</script>
<script>
localStorage.setItem('singnature','芜湖，起飞')
</script>
</body>
</html>
- 效果图：
五.总结
Cookies和localStorage都是在浏览器中存储数据的方式，各自适用于不同的场景和需求。Cookies适合存储少量且需要与服务器通信的数据，如会话信息；而localStorage则适合存储较大量的数据，且不需要每次请求时都发送到服务器。选择使用哪种存储方式应根据具体的应用需求和性能考量来决定。
