JavaScript之本地存储使用

在前端我们有时候需要用到一些数据或者测试某些数据，但是我们不可能每次都需要向后端请求数据 这时候我们可以使用前端本地存储方法来测试

本地存储特性：

1.数据存储在用户浏览器当中

2.设置，读取方便，甚至页面刷新不丢失数据

3.容量较大，sessionStorage大约5M，localStorage约20M

4.只能存储字符串，可以将对象json.stringify()编码后存储

第一种方式 window.sessionStorage 他的特性

1.生命周期为关闭浏览器窗口

2.在同一个窗口(页面)下数据可以共享

3.以键值对的形式存储使用

代码如下：

  // 存储数据
sessionStorage.setItem(key, value)

 // 获得数据
sessionStorage.getItem(key)

 // 删除数据
sessionStorage.removeItem(key)

   // 清除所有数据
 sessionStorage.clear()

第二种方式：window.localStorage 他的特性

1.生命周期永久生效，除了我们手动删除 否则关闭页面(浏览器)也会存在 (注意：仅限相同浏览器)

2.可以多个窗口或者不同的页面共享(也是必须相同浏览器)

3.以键值对的形式进行存储使用

代码如下：

 // 存储数据
localStorage.setItem(key, value)

// 获得数据
 localStorage.getItem(key)

// 删除数据
 localStorage.remove(key)

 // 清除所有数据
localStorage.clear()