javascript 本地存储（cookies、sessionStorage和localStorage解释及区别）

系统管理员 2024-04-17 05:46 66阅读 0赞

### JavaScript 存储对象 ###

Web 存储 API 提供了 sessionStorage （会话存储） 和 localStorage（本地存储）两个存储对象来对网页的数据进行添加、删除、修改、查询操作。

localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。

sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

##### 存储对象属性 #####

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>length</td> 
   <td>返回存储对象中包含多少条数据。</td> 
  </tr> 
 </tbody> 
</table>

##### 存储对象方法 #####

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>key(n)</td> 
   <td>返回存储对象中第 n 个键的名称</td> 
  </tr> 
  <tr> 
   <td>getItem(keyname)</td> 
   <td>返回指定键的值</td> 
  </tr> 
  <tr> 
   <td>setItem(keyname, value)</td> 
   <td>添加键和值，如果对应的值存在，则更新该键对应的值。</td> 
  </tr> 
  <tr> 
   <td>removeItem(keyname)</td> 
   <td>移除键(其中一个)</td> 
  </tr> 
  <tr> 
   <td>clear()</td> 
   <td>清除存储对象中所有的键</td> 
  </tr> 
 </tbody> 
</table>

其实还有一个cookies不知道为什么所找到的资料上没有，找到的解释是这样的

sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的，可以方便的在web请求之间保存数据。有了本地数据，就可以避免数据在浏览器和服务器间不必要地来回传递。  
sessionStorage、localStorage、cookie都是在浏览器端存储的数据

##### cookies、sessionStorage和localStorage解释 #####

Cookie 是一些数据, 存储于你电脑上的文本文件中。当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。Cookie 的作用就是用于解决 “如何记录客户端的用户信息”。

localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。

sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

##### cookies、sessionStorage和localStorage区别： #####

cookie在浏览器和服务器端来回传递数据，而localStorage和sessionStorage不会自动把数据发送给服务器，仅会保存在本地。

cookie会在浏览器请求头或者ajax请求头中发送cookie内容。

cookie可以设置过期日期，sessionStorage是会话级的数据，浏览器窗口关闭即清楚，localStorage是永久性的数据，一旦赋值，不管多长时间这值都是存在的，除非手动清除。

cookie的存储大小受限制，一般不超过4k，而localStorage和sessionStorage的存储大小一般不超过5M，大大提高了存储的体  
积。

sessionStorage不跨窗口，在另外一个窗口打开sessionStorage就不存在了，它只在当前窗口有效，而cookie和localStorage都是跨窗口的，即使浏览器的窗口关闭，这两个值还是存在的。

常用场景：

localStorage可以用来统计页面访问次数。  
sessionStorage可以用来判断当前页面用户登录状态。  
cookie一般存储用户名密码相关信息，一般使用escape转义编码后存储。