cookie、localStorage和sessionStorage三者区别

最新推荐文章于 2025-06-10 09:12:12 发布

原创最新推荐文章于 2025-06-10 09:12:12 发布 · 566 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

本文详细介绍了如何在JavaScript中操作cookie，以及localStorage和sessionStorage的使用方法、生命周期、数据大小和应用场景。对比了三种数据存储方式的优缺点，适合开发者理解并选择合适的存储策略。

cookie

保存cookie值

var dataCookie='110';
document.cookie = 'token' + "=" +dataCookie;

获取指定名称的cookie值

function getCookie(name) { //获取指定名称的cookie值
// (^| )name=([^;]*)(;|$),match[0]为与整个正则表达式匹配的字符串，match[i]为正则表达式捕获数组相匹配的数组；

  var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));

  if(arr != null) {
    console.log(arr);
    return unescape(arr[2]);
  }
  return null;
}

var cookieData=getCookie('token'); //cookie赋值给变量。

ocalStorage和sessionStorage

localStorage和sessionStorage所使用的方法是一样的

var name='sessionData';
var num=120;

sessionStorage.setItem(name,num);//存储数据
sessionStorage.setItem('value2',119);

let dataAll=sessionStorage.valueOf();//获取全部数据
console.log(dataAll,'获取全部数据');

var dataSession=sessionStorage.getItem(name);//获取指定键名数据
var dataSession2=sessionStorage.sessionData;//sessionStorage是js对象，也可以使用key的方式来获取值
console.log(dataSession,dataSession2,'获取指定键名数据');

sessionStorage.removeItem(name); //删除指定键名数据
console.log(dataAll,'获取全部数据1');

sessionStorage.clear();//清空缓存数据：localStorage.clear();
console.log(dataAll,'获取全部数据2');

使用方式基本就是上面这些

三者的异同

生命周期

cookie：可设置失效时间，没有设置的话，默认是关闭浏览器后失效

localStorage：除非被手动清除，否则将会永久保存。

sessionStorage：仅在当前网页会话下有效，关闭页面或浏览器后就会被清除。

存放数据大小

cookie：4KB左右

localStorage和sessionStorage：可以保存5MB的信息。

http请求

cookie：每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题

localStorage和sessionStorage：仅在客户端（即浏览器）中保存，不参与和服务器的通信

易用性

cookie：需要程序员自己封装，源生的Cookie接口不友好

localStorage和sessionStorage：源生接口可以接受，亦可再次封装来对Object和Array有更好的支持

应用场景

从安全性来说，因为每次http请求都会携带cookie信息，这样无形中浪费了带宽，所以cookie应该尽可能少的使用，另外cookie还需要指定作用域，不可以跨域调用，限制比较多。但是用来识别用户登录来说，cookie还是比storage更好用的。其他情况下，可以使用storage，就用storage。

storage在存储数据的大小上面秒杀了cookie，现在基本上很少使用cookie了

localStorage和sessionStorage唯一的差别一个是永久保存在浏览器里面，一个是关闭网页就清除了信息。localStorage可以用来跨页面传递参数，sessionStorage用来保存一些临时的数据，防止用户刷新页面之后丢失了一些参数。

注意点

如果一个浏览器同时打开两个tab，localstorage和cookie是共享的，sessionstorage是不共享的，这个在处理同一个浏览器登录多个用户的时候会用到
localstorage，sessionstorage在浏览器无痕模式下会存在丢失问题，要做可用性检测（在无痕模式）
a. localstorage对象仍然存在
b. 但是setitem会报异常:QuotaExceededError
c. getItem和removeItem直接忽略

function isLocalStorageSupported() {
    var testKey = 'test',
        storage = window.sessionStorage;
    try {
        storage.setItem(testKey, 'testValue');
        storage.removeItem(testKey);
        return true;
    } catch (error) {
        return false;
    }
}