cookie，sessionStorage和localStorage的区别

最新推荐文章于 2023-08-30 09:30:23 发布

Winne_Shen

最新推荐文章于 2023-08-30 09:30:23 发布

阅读量285

点赞数

分类专栏：前端文章标签： cookie sessionStorage localStorage

本文链接：https://blog.csdn.net/Winne_Shen/article/details/79581347

版权

前端专栏收录该内容

32 篇文章 0 订阅

订阅专栏

介绍

cookie：会话cookie（随浏览器的关闭而销毁）和持久cookie（到了过期时间才销毁）；在客户端和服务端来回传递。

sessionStorage：针对一个session的数据存储（html5）

localStorage：没有时间限制的数据存储（html5）

最大容量比较

cookie最大容量

（约4090+个字节）

IE：50个cookie/个域名

Firefox：50个cookie/个域名

Opera：30个cookie/个域名

Safari/Webkit：貌似没有限制（但过多会使header过大，导致错误）

（参考https://www.cnblogs.com/henryhappier/archive/2011/03/03/1969564.html）

sessionStorage最大容量

IE9：5000000

Firefox22：5242880

Chrome28：2621440

Safari5.1：2621440

Oper：5M

（参考https://www.zhihu.com/question/22930109/answer/23113967）

Storage API

sessionStorage和localStorage有更多的API：

属性

Storage.length 只读
返回表示存储在Storage对象中的数据项数的整数。

方法

Storage.key()
当传递一个数字n时，该方法将返回存储中第n个密钥的名称。
Storage.getItem()
当传递一个键名时，将返回该键的值。
Storage.setItem()
在传递密钥名称和值时，会将该密钥添加到存储中，或者如果该密钥已存在，则更新该密钥的值。
Storage.removeItem()
当传递密钥名称时，将从存储中删除该密钥。
Storage.clear()
调用时，将清空存储器中的所有密钥。

    // Save data to sessionStorage
    sessionStorage.setItem('key', 'value');

    // Get saved data from sessionStorage
    var data = sessionStorage.getItem('key');

    // Remove saved data from sessionStorage
    sessionStorage.removeItem('key');

    // Remove all saved data from sessionStorage
    sessionStorage.clear();

事件

    window.addEventListener("storage", function (e) {
        alert(e.newValue);
    });

（参考https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage）

Storage存储

每个顶层浏览上下文有唯一的一组对话存储区域，一个源一组（源：协议+主机+端口+域）

用户代理必须有一组本地存储区域，也是一个源一组。

（参考https://html.spec.whatwg.org/multipage/webstorage.html#the-sessionstorage-attribute）

总结

cookie在浏览器和服务器间来回传递，sessionStorage和localStorage不会；
sessionStorage和localStorage的存储空间更大；
sessionStorage和localStorage有更多丰富易用的接口；
sessionStorage和localStorage各自独立的存储空间。

以上，有不准确的地方欢迎留言指出。