JavaScript的本地存储和会话存储

seven_ • 2023年3月1日上午10:40 • 后端笔记 • 阅读 194

Storage

1 认识Storage

WebStorage主要提供了一种机制，可以让浏览器提供一种比cookie更直观的key、value存储方式 :

localStorage：本地存储，提供的是一种永久性的存储方法，在关闭掉网页重新打开时，存储的内容依然保留；

// 将info保存到localStorage(本地存储)
localStorage.setItem("info", "kaisa")
// 从localStorage中获取info
let info = localStorage.getItem("info")
console.log(info) // kaisa

sessionStorage：会话存储，提供的是本次会话的存储，在关闭掉会话时，存储的内容会被清除；

// 将age保存到会话存储
sessionStorage.setItem("age", 18)
// 从会话存储中获取age
let age = sessionStorage.getItem("age")
console.log(age) // 18

我们会发现localStorage和sessionStorage看起来非常的相似。

那么它们有什么区别呢？

验证一：关闭网页后重新打开，localStorage会保留，而sessionStorage会被删除；
验证二：在页面内实现跳转，localStorage会保留，sessionStorage也会保留；
验证三：在页面外实现跳转（打开新的网页），localStorage会保留，sessionStorage不会被保留；

2 Storage常见的方法和属性

Storage(包含localStorage和sessionStorage)有如下的属性和方法：

属性：

Storage.length：只读属性, 返回一个整数，表示存储在Storage对象中的数据项数量；
```
console.log(localStorage.length) // 1
```

方法：

Storage.getItem()：该方法接受一个key作为参数，并且返回key对应的value；
Storage.setItem()：该方法接受一个key和value，并且将会把key和value添加到存储中。如果key存储，则更新其对应的值；
Storage.key(index)：该方法接受一个数值n作为参数，返回存储中的第n个key名称；
```
console.log(sessionStorage.key(0))
```
Storage.removeItem()：该方法接受一个key作为参数，并把该key从存储中删除；
```
console.log(localStorage.removeItem("info"))
```
Storage.clear()：该方法的作用是清空存储中的所有key；
```
localStorage.clear()
```