【前端知识之JS】JS本地存储

发布时间：2024-04-12 15:01

前言

本系列主要整理前端面试中需要掌握的知识点。本节介绍本地存储的四种方式，以及他们的比较和应用。

Cookie类型为小型文本文件，指某些网站为了辨别用户身份而存储在用户本地终端上的数据，是为了解决HTTP无状态导致的问题。
Cookie文件一般不超过4KB，由一个名称（Name）、一个值（Value）和其它几个用于控制cookie有效期、安全性、使用范围的可选属性组成。
但是cookie在每次请求中都会被发送，如果不适用HTTPS对其加密，它保存的信息就容易泄漏，导致安全风险。如，在一些使用cookie保持登录的网站上，如果cookie被窃取，他人很容易利用你的cookie在假扮你登录。
Cookie的常用属性：

属性	作用	例子
Expires	设置Cookie的过期时间	Expires=Wed, 21 Oct 2015 07:28:00 GMT
Max-Age	设置在 Cookie 失效之前需要经过的秒数（优先级比Expires高）	Max-Age=604800
Domain	指定了 Cookie 可以送达的主机名
Path	指定了一个 URL路径，这个路径必须出现在要请求的资源的路径中才可以发送 Cookie 首部	Path=/docs # /docs/Web/ 下的资源会带 Cookie 首部
Secure	只应通过被HTTPS协议加密过的请求发送给服务端

document.cookie = '名字=值';

Set-Cookie:name=aa; domain=aa.net; path=/  # 服务端设置
document.cookie =name=bb; domain=aa.net; path=/  # 客户端设置

特点：

使用：

功能	代码
设置	localStorage.setItem(‘username’,‘cfangxu’);
获取	localStorage.getItem(‘username’)
获取键名	localStorage.key(0) //获取第一个键名
删除	localStorage.removeItem(‘username’)
一次性清除所有存储	localStorage.clear()

缺点：

sessionStorage和localStorage使用方法基本一致，唯一不同的是生命周期，一旦页面（会话）关闭，sessionStorage将会删除数据。

优点：

缺点：

区别	cookie	sessionStorage	localStorage
存储大小	不能超过4K	可以5M或者更大	可以5M或者更大
有效时间	过期时间之前一直有效	当前浏览器窗口关闭自动删除	不主动删除就永久有效
数据与服务器之间的交互方式	自动相互传递	本地保存	本地保存

场景	推荐
标记用户与跟踪用户行为的情况	cookie
适合长期保存在本地的数据（令牌）	localStorage
敏感账号一次性登录	sessionStorage
存储大量数据的情况、在线文档（富文本编辑器）保存编辑历史的情况	indexedDB