首页 > 其他分享> 文章详细

本地存储

2022-04-17 10:33:56 阅读：166 来源： 互联网

标签：存储 querySelector sessionStorage localStorage 本地 let document

本地存储的特性

　　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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

本地存储

本地存储的特性

window.sessionStorage

window.localStorage