[精讲]cookie sessionStorage localStorage 区别

cookie，sessionStorage和localStorage都是在浏览器端用于存储数据的方式，它们之间的主要区别如下：

存储大小：

• cookie 的大小受到浏览器和服务器的限制，通常不能超过4KB。

• sessionStorage 和 localStorage 通常都可以存储比较大的数据，大小限制一般在5MB到10MB之间。

生命周期：

• cookie 可以设置一个过期时间，在过期时间之前有效。

• sessionStorage 的数据在关闭浏览器窗口之后会被删除，也就是会话结束时删除。

• localStorage 的数据会一直保留，除非主动删除或者清空缓存。

存储方式：

• cookie 的数据存储在浏览器的 HTTP 头中，每次请求都会携带。

• sessionStorage 和 localStorage 都是存储在浏览器的本地缓存中。

同源原则：

• Cookie、SessionStorage、 LocalStorage数据共享都遵循同源原则

• SessionStorage还限制必须是同一个页面。

应用场景：

• cookie

a、用于用户身份验证：当用户进行登录操作时，服务器可以设置一个 cookie 用于验证用户身份，并在该 cookie 有效期内自动登录用户。

b、购物车功能：当用户将商品添加到购物车时，服务器可以将商品信息保存在 cookie 中，以便用户下次访问页面时能够保留之前添加的商品。

c、记录用户偏好：例如，网站的语言、颜色、字体等偏好设置可以保存在 cookie 中，以便用户下次访问时能够保留之前的设置。

举例：

保存用户偏好设置：

functionsavePreference(preference) {
  document.cookie=`preference=${preference}; expires=Fri, 31 Dec 9999 23:59:59 GMT`;
}
​
functionloadPreference() {
  constcookies=document.cookie.split(';');
  for (leti=0; i<cookies.length; i++) {
    constcookie=cookies[i].trim();
    if (cookie.startsWith('preference=')) {
    returncookie.substring('preference='.length, cookie.length);
    }
  }
  returnnull;
}

记录用户访问次数：

functionincrementVisits() {
  letvisits=parseInt(document.cookie.split('; ').find(row=>row.startsWith('visits=')).split('=')[1]);
  document.cookie=`visits=${++visits}; path=/`;
  console.log(`You have visited this site ${visits}times.`);
}

• sessionStorage

a、表单数据保存：在表单填写过程中，可以将表单数据保存在sessionStorage 中，以便用户在刷新或回退页面时不会丢失填写的内容。

b、单页应用状态管理：在单页应用中，可以将页面状态保存在 sessionStorage 中，以便用户切换页面时能够保留之前的状态。

c、临时数据存储：例如，用户在某个功能页面上传了一张图片，可以将该图片信息保存在 sessionStorage 中，在用户提交之前可以通过 sessionStorage 进行临时存储。

举例：

保存表单数据：

functionsaveFormData() {
  constname=document.getElementById('name').value;
  constemail=document.getElementById('email').value;
  sessionStorage.setItem('name', name);
  sessionStorage.setItem('email', email);
}
functionloadFormData() {
  constname=sessionStorage.getItem('name');
  constemail=sessionStorage.getItem('email');
  if (name) {
    document.getElementById('name').value=name;
  }
  if (email) {
    document.getElementById('email').value=email;
  }
}

记录用户登录状态：

functionlogin() {
  // 登录逻辑...
  sessionStorage.setItem('loggedIn', true);
}
functionlogout() {
  // 注销逻辑...
  sessionStorage.removeItem('loggedIn');
}
functionisLoggedIn() {
  returnsessionStorage.getItem('loggedIn') ==='true';
}

• localStorage

a、持久化登录：当用户勾选“记住密码”时，可以将用户的登录信息保存在 localStorage 中，以便用户下次访问时能够自动登录。

b、用户偏好设置：与 cookie 类似，可以将用户偏好设置保存在 localStorage 中，以便用户下次访问时能够保留之前的设置。

c、缓存静态资源：对于一些静态资源文件（例如图片、CSS、JS 等），可以将其缓存在 localStorage 中，以便用户下次访问时能够快速加载。

1. 记录用户主题模式：

functionsetTheme(theme) {
  localStorage.setItem('theme', theme);
  document.body.className=theme;
}
functionloadTheme() {
  consttheme=localStorage.getItem('theme');
  if (theme) {
    document.body.className=theme;
  }
}

保存用户游戏分数：

functionsaveScore(score) {
  localStorage.setItem('highScore', score);
}
functionloadScore() {
  constscore=localStorage.getItem('highScore');
  if (score) {
    console.log(`Your high score is ${score}.`);
  } else {
    console.log(`You haven't played this game yet.`);
  }
}

举例：

//设置cookie
document.cookie="name=Tom; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/";
//获取cookie
letname=document.cookie.match(newRegExp("(^| )name=([^;]*)(;|$)"));
console.log(name[2]);
​
//设置sessionStorage
sessionStorage.setItem("name", "Tom");
//获取sessionStorage
letname=sessionStorage.getItem("name");
console.log(name);
​
//设置localStorage
localStorage.setItem("name", "Tom");
//获取localStorage
letname=localStorage.getItem("name");
console.log(name);