【快速区分】Cookie、session，sessionStorage，localStorage

最新推荐文章于 2025-12-18 10:02:55 发布

原创最新推荐文章于 2025-12-18 10:02:55 发布 · 682 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

本文详细介绍了浏览器的四种存储方式：Cookie、Session、SessionStorage和LocalStorage。Cookie用于服务器端生成并存储在客户端，用于用户身份验证；Session则通过服务器上的用户信息确认用户身份；SessionStorage在会话期间存储数据，关闭标签页即失效；LocalStorage则提供长期的数据存储，即使浏览器关闭数据仍然存在。每种存储方式都有其特定的安全性、生命周期、访问范围和用途，适用于不同的应用场景。

表格快速对比：

	cookie	session	sessionStorage	localStorage
存储位置	客户端	服务端	会话存储	本地存储
安全性	明文存放在客户端，安全性低	安全高
生命周期	设置有效时间（累积的）默认会话关闭失效	设置有效时间（间隔的）	会话关闭失效	一直有效，需手动清除
访问范围	多个浏览器共享	一个浏览器独享	（同源下）相同标签页打开的多个iframe之间数据共享	同源标签页与window窗口下共享
用途	服务器端生成，用于表示用户身份，一般携带在请求头中	通过检查服务器上的“用户明细表”来确认用户身份	只存储在当前会话有效	长久存储数据
存储大小	4kb	无限制	5MB	5MB

详细介绍：

cookie：存储在浏览器中，每次浏览器向服务器发送请求都需要携带cookie，一般情况下，cookie是产生于服务器端，保存于客户端。

但是我们也可以通过js来产生cookie；只针对于服务器,同一个服务器可以共享cookie。存储少量数据，面向服务器的 4kb，通常通过js-cookie这个库来操作cookie（可到Bootcdn下载或者在线引入js-cookie这个库（js-cookie (vlatest) - A simple, lightweight JavaScript API for handling cookies | BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务））

Cookie //创建一个cookie,7天后过期
Cookies.set("name","this is a test cookie",{ expires: 7 })
//获取cookie
console.log(Cookie.get('name'));
//移除cookie
Cookies.remove('name')

session：存储于服务器

session 机制就是通过检查服务器上的“客户明细表”来确认客户身份。session 相当于程序在服务器上建立的一份客户档案，客户来访的时候只需要查询客户档案表就可以了。

sessionStorage 会话存储选项卡选项卡关闭,会话失效 --写项目推荐使用

页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。
打开多个相同的URL的Tabs页面，会创建各自的sessionStorage。
关闭对应浏览器tab，会清除对应的sessionStorage。
sessionStorage 实例方法

        // 设置内容
        sessionStorage.setItem('name','terry');
        // 获取内容
        console.log(sessionStorage.getItem('name'));
        // 清空内容的属性值
        // sessionStorage.clear();
        // 清空内容
        sessionStorage.removeItem('name')

localStorage 本地存储存到本地磁盘中，即使浏览器关闭数据依然在。

优势:浏览器的统一标准在5M,不同的浏览器大小会有区别，可在第一次请求的数据(或者长期使用的数据)用localStorage存在本地，此时相当于在本地有了一个5M左右的前台数据库,相比cookie每次请求都带着,节约带宽。
局限:
    1.各个浏览器的支持的大小不一样，业界认为是5M,并且在不同的浏览器不同版本支持度不一样。
    2.localStorage的存储的数据都是K-V键值对，并且值会被转为String类型，所以有时候会用JSON进行数据转换。
    3.localStorage本质上是字符串的读取,存储的数据不可过多，否则消耗会消耗内存空间，导致页面卡顿
    4.localStorage的数据不能被爬虫抓取.

        // 设置内容
        localStorage.setItem('name','larry');
        // 获取内容
        console.log(localStorage.getItem('name'));
        // 清空内容
        localStorage.clear()
        // 清空内容
        // localStorage.removeItem('name')