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

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

前言

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


一、本地存储的方式

1、cookie

  • 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协议加密过的请求发送给服务端
  • cookie的使用
document.cookie = '名字=值';
  • cookie的修改:首先要确定domain和path属性都是相同的,否则就会创建出一个新的cookie。
Set-Cookie:name=aa; domain=aa.net; path=/  # 服务端设置
document.cookie =name=bb; domain=aa.net; path=/  # 客户端设置
  • cookie的删除:最常用的方法就是给cookie设置一个过期的事件,cookie过期后就会被浏览器删除。

2、localStorage

特点:

  • 生命周期:持久化的本地存储,除非主动删除数据,否则数据永远不会过期;
  • 存储的信息在同一域中是共享的;
  • 当本页操作(新增、修改、删除)了localStorage的时候,本页面不会触发storage事件,但是别的页面会触发storage事件。
  • 大小:5M(跟浏览器厂商有关系)
  • localStorage本质上是对字符串的读取,如果存储内容多的话,会消耗内存空间,会导致页面变卡
  • 受同源策略的限制

使用:

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

缺点:

  • 无法像Cookie一样设置过期的时间;
  • 只能存入字符串,无法直接存对象。

3、sessionStorage

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

4、扩展的前端存储方式

  • indexedDB是一种低级的API,用于客户端存储大量结构化数据。该API使用索引来实现对该数据的高性能搜索。
  • 虽然Web Storage对于存储较少量的数据很有用,但对于存储大量的结构化数据来说,这种方法不太方便,这是用IndexDB就很有用。

优点:

  • 存储量理论上没有上限;
  • 所有操作都是异步的,相比LocalStorage同步操作性能更高,尤其是数据量较大时
  • 原生支持存储JS的对象;
  • 就是一个数据库,数据库能做的它都能做。

缺点:

  • 操作非常繁琐;
  • 本身有一定的门槛。

二、三种存储方式的区别

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

三、应用场景

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

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号