#今日说码栏目# 第二十八集本地存储的三种方式 sessionStorage、localStorage、cookier

房东的_猪

于 2022-09-15 16:03:28 发布

阅读量214

点赞数 2

文章标签： sessionStorage localStorage cookie 数据存储 JavaScript

本文链接：https://blog.csdn.net/Abner_/article/details/126710469

版权

JavaScript有三种数据存储方式，它们分别是：

(1) sessionStorage

(2) localStorage

(3) cookier

1、sessionStorage

sessionStorage仅在当前会话下有效，关闭页面或浏览器后，数据被清除；
sessionStorage.setItem(key,value) 设置数据
sessionStorage.getItem(key) 获取数据
sessionStorage.removeItem(key) 移除数据
sessionStorage.clear() 清除所有数据

<body>
  <button id="btn1">存</button>
  <button id="btn2">取</button>
  <button id="btn3"> 删除 </button>
  <button id="btn4">全部清除</button>
  <script>
    //设置数据
    document.getElementById("btn1").addEventListener('click', () => {
      sessionStorage.setItem("obj", JSON.stringify({ name: "张三", age: 18 }))
    })
    //获取数据
    document.getElementById("btn2").addEventListener('click', () => {
      console.log(sessionStorage.getItem("obj"))
    })
    //移除数据
    document.getElementById("btn3").addEventListener('click', () => {
      sessionStorage.removeItem("obj")
    })
    //清除所有数据
    document.getElementById("btn4").addEventListener('click', () => {
      sessionStorage.clear()
    })
  </script>
</body>

2、localStorage

localStorage 是 HTML5 标准中新加入的技术，用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除；
仅在当前会话下有效，关闭页面或浏览器后，数据被清除；
localStorage.setItem(key,value) 设置数据
localStorage.getItem(key) 获取数据
localStorage.removeItem(key) 移除数据
localStorage.clear() 清除所有数据

<body>
  <button id="btn1">存</button>
  <button id="btn2">取</button>
  <button id="btn3"> 删除 </button>
  <button id="btn4">全部清除</button>
  <script>
    //设置数据
    document.getElementById("btn1").addEventListener('click', () => {
      localStorage.setItem("obj", JSON.stringify({ name: "张三", age: 18 }))
    })
    //获取数据
    document.getElementById("btn2").addEventListener('click', () => {
      console.log(localStorage.getItem("obj"))
    })
    //移除数据
    document.getElementById("btn3").addEventListener('click', () => {
      localStorage.removeItem("obj")
    })
    //清除所有数据
    document.getElementById("btn4").addEventListener('click', () => {
      localStorage.clear()
    })
  </script>
</body>

3、cookier

cookier介绍Cookie 是一些数据, 存储于你电脑上的文本文件中，用于存储 web 页面的用户信息Cookie 数据是以键值对的形式存在的，每个键值对都有过期时间。如果不设置时间，浏览器关闭，cookie就会消失，当然用户也可以手动清除cookieCookie每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题Cookie内存大小受限，一般每个域名下是4K左右，每个域名大概能存储50个键值对

基本操作使用方法