cookie,localStorage,sessionStorage的一些知识

最新推荐文章于 2024-05-10 09:40:33 发布

f45056231p

最新推荐文章于 2024-05-10 09:40:33 发布

阅读量155

点赞数

分类专栏： javaee

javaee 专栏收录该内容

59 篇文章

订阅专栏

本文详细比较了前端存储技术Cookie、sessionStorage和localStorage的区别，包括数据携带方式、存储大小、有效期、作用域等方面，并介绍了HTML5提供的客户端存储方法及其API。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

a) Cookie数据始终在同源的http请求中携带（不管需要不需要），即cookie在浏览器和服务器之间来回传递。而sessionStorage和localStroage不会自动把数据发送给服务器，仅在本地保存。Cookie数据还有路径的概念，可以限制保存在某个路径下；

b) 存储大小限制也不同，cookie数据不能超过4k，同时因为每次Http请求都会携带cookie，所以cookie只适合保存很小的数据，比如会话标识。sessionStroage和localstroage虽然也有大小限制，但是比cookie大很多，可以达到5M或更大；

c) 数据有效期也不同，sessionStroage仅在当前浏览器窗口关闭前有效；localStroage始终有效，窗口或者浏览器关闭也一直保存；cookie在设置的有效期内有效，不管窗口或者浏览器是否关闭；(cookie在关闭浏览器就会失效吧??)

d) 作用域不同，sessionStroage不能在不同的浏览器窗口共享，即使是同一个页面；localStroage在所有的同源窗口中都是共享的；cookie也是在所有的同源窗口中共享的；

e) Web storage 支持事件通知机制，可以将数据更新的通知发送给监听者；

f) Web storage 的api接口使用更方便。

K值的y时,都会发生覆盖以前的y值.

在客户端存储数据

HTML5 提供了两种在客户端存储数据的新方法：

localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储
除了保存期限的长短不同，这两个对象的属性和方法完全一样。

之前都是由 cookie 完成,但它不适合大量数据的存储，因为它们由每个对服务器的请求来传递(懂了,cookie是一直夹带在request中的,一直在随着这个请求被传递(在java中request.getCookies可以拿到它))，这使得 cookie 速度很慢而且效率也不高。在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。

对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。

与Cookie一样，它们也受同域限制。某个网页存入的数据，只有同域下的网页才能读取。

HTML5 使用 JavaScript 来存储和访问数据。

//意思localStorage和sessionStorage只有H5页面可用,并且是纯JS操作的?

可以通过检查window对象是否包含sessionStorage和localStorage属性，可以确定浏览器是否支持这两个对象。

                    function checkStorageSupport() {
                     // sessionStorage
                      if (window.sessionStorage) {
                        return true;
                      } else {
                        return false;
                      }

                      // localStorage
                      if (window.localStorage) {
                        return true;
                      } else {
                        return false;
                      }
                    }

操作方法
存入/读取数据
sessionStorage和localStorage保存的数据，都以“键值对”的形式存在。也就是说，每一项数据都有一个键名和对应的值。所有的数据都是以文本格式保存。

存入数据使用setItem方法。它接受两个参数，第一个是键名，第二个是保存的数据。

sessionStorage.setItem(“key”,”value”);

localStorage.setItem(“key”,”value”);
读取数据使用getItem方法。它只有一个参数，就是键名。

var valueSession = sessionStorage.getItem(“key”);

var valueLocal = localStorage.getItem(“key”);
清除数据
removeItem方法用于清除某个键名对应的数据。

sessionStorage.removeItem(‘key’);

localStorage.removeItem(‘key’);
clear方法用于清除所有保存的数据。

sessionStorage.clear();

localStorage.clear();
遍历操作
利用length属性和key方法，可以遍历所有的键。

for(var i = 0; i < localStorage.length; i++){
console.log(localStorage.key(i));
}
其中的key方法，根据位置（从0开始）获得键值。

localStorage.key(1);
storage事件
当储存的数据发生变化时，会触发storage事件。我们可以指定这个事件的回调函数。

window.addEventListener(“storage”,onStorageChange);
回调函数接受一个event对象作为参数。这个event对象的key属性，保存发生变化的键名。

function onStorageChange(e) {
console.log(e.key);
}
除了key属性，event对象的属性还有三个：

oldValue：更新前的值。如果该键为新增加，则这个属性为null。
newValue：更新后的值。如果该键被删除，则这个属性为null。
url：原始触发storage事件的那个网页的网址。
值得特别注意的是，该事件不在导致数据变化的当前页面触发。如果浏览器同时打开一个域名下面的多个页面，当其中的一个页面改变sessionStorage或localStorage的数据时，其他所有页面的storage事件会被触发，而原始页面并不触发storage事件。可以通过这种机制，实现多个窗口之间的通信。所有浏览器之中，只有IE浏览器除外，它会在所有页面触发storage事件。

这和cookie一样,y值只能为字符串,但可把数据保存为JSON格式,然后用JSON.stringify(JSON对象)函数,转为JSON字符串,取出时可用JSON.parse(JSON字符串)函数,转回为JSON格式对象,这样就方便只用一个K值存储多的数据.(存时注意设置方便的分隔符,方便split)

在js中操作cookie用document.cookie来操作获取和设置就够了,其他的不好记就不记.针对同域,这样获取的是该域全部的cookie,需要拆分操作,但上面的localStroage和sessionStroage就都有getItem(K)方法,可直接针对性的取到想要的y值了,而且localStroage和sessionStroage好像本身也都是数组,存储了该域的所有k值,可用length属性遍历,通过localStorage.key(i)方法,遍历出所有K值,从而拿到所有y值.