首页 > 其他分享> > 本地存储

本地存储

2022-04-17 10:33:56 作者：互联网

本地存储的特性

　　1、数据是存储在用户的浏览器中。

　　2、设置、读取方便，甚至页面刷新或关闭都不会丢失数据。

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

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

window.sessionStorage

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

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

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

　　存储：sessionStorage.setItem(key, value)。

　　获取：sessionStorage.getItem(key)。

　　删除：sessionStorage.remove(key)。

　　清空：sessionStorage.clear()。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <input type="text">
  <button class="set">存储</button>
  <button class="get">获取</button>
  <button class="remove">删除</button>
  <button class="del">清空</button>
</body>
<script>
  let ipt = document.querySelector('input')
  let set = document.querySelector('.set')
  let get = document.querySelector('.get')
  let remove = document.querySelector('.remove')
  let del = document.querySelector('.del')
  // 存储
  set.addEventListener('click', () => {
    let val = ipt.value
    sessionStorage.setItem('uname', val)
    sessionStorage.setItem('pwd', val)
  })
  // 获取
  get.addEventListener('click', () => {
    console.log(sessionStorage.getItem('uname'))
  })
  // 移除
  remove.addEventListener('click', () => {
    sessionStorage.removeItem('uname')
  })
  // 清空
  del.addEventListener('click', () => {
    sessionStorage.clear()
  })
</script>

</html>

window.localStorage

　　1、声明周期永久生效，除非手动删除，否则关闭页面也会存在。

　　2、可以多窗口(页面)共享，同一个浏览器可以共享。

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

　　存储：localStorage.setItem(key, value)。

　　获取：localStorage.getItem(key)。

　　删除：localStorage.remove(key)。

　　清空：localStorage.clear()。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <input type="text">
  <button class="set">存储</button>
  <button class="get">获取</button>
  <button class="remove">删除</button>
  <button class="del">清空</button>
</body>
<script>
  let ipt = document.querySelector('input')
  let set = document.querySelector('.set')
  let get = document.querySelector('.get')
  let remove = document.querySelector('.remove')
  let del = document.querySelector('.del')
  // 存储
  set.addEventListener('click', () => {
    let val = ipt.value
    localStorage.setItem('uname', val)
    localStorage.setItem('pwd', val)
  })
  // 获取
  get.addEventListener('click', () => {
    console.log(localStorage.getItem('uname'))
  })
  // 移除
  remove.addEventListener('click', () => {
    localStorage.removeItem('uname')
  })
  // 清空
  del.addEventListener('click', () => {
    localStorage.clear()
  })
</script>

</html>

标签：存储,querySelector,sessionStorage,localStorage,本地,let,document
来源： https://www.cnblogs.com/0529qhy/p/16155108.html