浏览器的 Cookie、 LocalStorage 与 SessionStorage区别及用法

基本概念

什么是 Cookie？

Cookie 是一些数据, 存储于你电脑上的文本文件中。

当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。

Cookie 的作用就是用于解决 "如何记录客户端的用户信息":

• 当用户访问 web 页面时，他的名字可以记录在 cookie 中。
• 在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。

 

什么是localStorage与 SessionStorage？

localStorage与 SessionStorage都是HTML5 提供的在客户端存储数据的新方法。

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。 localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

 

 Cookie、 LocalStorage 与 SessionStorage区别

共同点：都是保存在浏览器端、且同源。 

 Cookie：cookie的储存数据大小比较小；

                cookie会浏览器和服务器间来回传递;

               cookie可以设置过期时间，若不设置时间，则表示这个cookie的生命期为浏览器会话期间，

               关闭浏览器窗口，cookie就会消失。

 

LocalStorage：储存数据大小比较大；

                        不会自动把数据发送给服务器，仅在本地保存；

                        localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。

                        localStora除非主动删除数据，否则数据永远不会消失。

 

SessionStorage：储存数据大小比较大；

                            不会自动把数据发送给服务器，仅在本地保存；

sessionStorage的生命周期是在仅在当前会话下有效。sessionStorage引入了一个“浏览器口‘’sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。

 

 

LocalStorage 与 SessionStorage的用法

通过开发者工具的application选项下单localStorage和sessionStorage可以直观的看见它们的本地缓存。

 

 

 

localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等。

 

创建，储存：（通过key储存相应的value值）

sessionStorage.setItem("key", "value");                        localStorage.setItem("key", "value");

 

获取：（通过key获取相应的value值）

sessionStorage.getItem("key")；                                  localStorage.getItem("key")；

 

删除：（通过key删除相应的数据）

sessionStorage.removeItem("key")；                           localStorage.removeItem("key");

 

清空：（清空所有数据）

sessionStorage.clear();                                                   localStorage.clear();

 

循环打印 LocalStorage 与 SessionStorage的数据：

for(let i=0; i<sessionStorage.length;i++){
    console.log("第"+i+"数据的key值为"+localStorage.key(i)+",value为"+localStorage.getItem(localStorage.key(i)));
}

for(let i=0; i<localStorage.length;i++){
    console.log("第"+i+"数据的key值为"+localStorage.key(i)+",value为"+localStorage.getItem(localStorage.key(i)));
}