JavaScript本地存储常用方法有哪些，及应用场景

何必辨认我
708 阅读4分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第5天，点击查看活动详情

1.为什么使用本地存储

  • 在前端开发中，偶尔需要存储一些如： 用户信息、登录状态、历史记录等常量数据。用于后续二次调用，并且避免刷新后丢失。这时，就需要用到本地存储了。

2.常用的JavaScript本地存储有哪些？

  • cookie
  • localStorage
  • sessionStorage

3.JavaScript本地存储位置

image.png

4.cookie

1.cookie是什么

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

2.cookie的使用

  • 设置cookie
document.cookie = 'age=20'
  • 读取cookie
// 读取cookie
var msg = document.cookie
console.log(msg) // age=20
  • 设置过期时间
// 添加过期时间（单位：天）
var d = new Date() // 当前时间 2022-08-04
var days = 1       // 1
d.setDate(d.getDate() + days)
document.cookie = "username=orochiz;"+"expires="+d
  • 删除cookie
// 删除cookie （给某个键值对设置过期的时间）
d.setDate(d.getDate() - 1)
console.log(document.cookie)

image.png

5.localStorage

1.localStorage是什么？

局部存储器。它是html5新增的一个本地存储API，IE8及以上浏览器都兼容。

2.localStorage的特点

  • 生命周期：持久化的本地存储，用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。
  • 存储的信息在同一域中是共享的
  • 大小：5M
  • localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
  • 当本页操作（新增、修改、删除）了localStorage的时候，本页面不会触发storage事件,但是别的页面会触发storage事件。
  • 受同源策略的限制

3.localStorage的使用

  • 设置localStorage
// 设置localStorage
localStorage.setItem('username','何必辨认我')

image.png

  • 获取localStorage中uaername的值
const name = localStorage.getItem('username')
console.log("name=>", name)

image.png

  • 获取键名
//获取第2个键名
const item = localStorage.key(1) 
console.log(item)
  • 删除username
// 删除username
localStorage.removeItem('username')
// 获取localStorage中uaername的值
const name1 = localStorage.getItem('username')
console.log("name=>", name1)

image.png

  • 一次性清除所有存储
// 一次清除所有存储
localStorage.clear()

image.png

4.localstorage缺点

  • 无法想cookie一样设置过期时间
  • 只能存入字符串，无法直接存对象
localStorage.setItem('key', {name: 'value'})
console.log(localStorage.getItem('key')); // [object, Object]

localStorage的完整代码

// 设置localStorage
localStorage.setItem('username','何必辨认我')
localStorage.setItem('password','123')
// 获取localStorage中uaername的值
const name = localStorage.getItem('username')
console.log("name=>", name)

// 获取第2个键名
const item = localStorage.key(1) 
console.log(item)

// 删除username
localStorage.removeItem('username')
// 获取localStorage中uaername的值
const name1 = localStorage.getItem('username')
console.log("name=>", name1)

// 一次清除所有存储
localStorage.clear()

localStorage.setItem('key', {name: 'value'})
console.log(localStorage.getItem('key')) // [object, Object]

6.sessionStorage

1.sessionStorage是什么？

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

2.sessionStorage的特点

  • 储存量理论上没有上限
  • 所有操作都是异步的，相比 LocalStorage 同步操作性能更高，尤其是数据量较大时
  • 原生支持储存JS的对象
  • 是个正经的数据库，意味着数据库能干的事它都能干

3.sessionStorage的使用

  • 保存数据到sessionStorage
// 保存数据到sessionStorage
sessionStorage.setItem('name', '豪猪')

image.png

  • 获取name的seesionStorage数据
// 从session中获取name的数据
let data = sessionStorage.getItem('name')
console.log(data)

image.png

  • 从 sessionStorage 删除保存的name数据
sessionStorage.removeItem('name')
  • 从 sessionStorage 删除所有保存的数据
sessionStorage.clear()

4.sessionStorage的缺点

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

7.cookie、localStorage和sessionStorage的区别

  • 存储大小：cookie数据大小不能超过4k，sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大
  • 有效时间：localStorage存储持久数据，浏览器关闭后数据不丢失除非主动删除数据； sessionStorage数据在当前浏览器窗口关闭后自动删除；cookie设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
  • 数据与服务器之间的交互方式，cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端； sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存

8.cookie、localStorage和sessionStorage的应用场景

  • 标记用户与跟踪用户行为的情况，推荐使用cookie
  • 适合长期保存在本地的数据（令牌），推荐使用localStorage
  • 敏感账号一次性登录，推荐使用sessionStorage

最后

希望本文可以给大家带来帮助，阅读后能有所收获(^-^)。

avatar
文章
阅读
粉丝