localstorage

1.localStorage介绍

本地存储，将数据存储到浏览器

2.语法

存数据：localStorage.setItem（‘属性名’，属性值）

取数据：localStorage.getItem（‘属性名’）

删除数据：localStorage.removeItem（‘属性名’）

清空数据：localStorage.clear（）

3.注意点

a.存储的数据只能是字符串类型。如果是其他数据类型则会自动调用toString()方法转成字符串

b.永久存储。除非自己删，否则一直存在于浏览器

后台系统.png

<body>
  <button class="btn1">存数据setItem</button>
  <button class="btn2"> 取数据getItem</button>
  <button class="btn3">删除数据removeItem</button>
  <button class="btn4">清空数据clear</button>


  <!-- 
  存数据：localStorage.setItem（‘属性名’，属性值）
  取数据：localStorage.getItem（‘属性名’）
  删除数据：localStorage.removeItem（‘属性名’）
  清空数据：localStorage.clear（） 
-->
  <script>
    document.querySelector('.btn1').onclick = function () {
      //存数据
      localStorage.setItem('uname', '智孝欧尼')
      localStorage.setItem('age', '35')
      localStorage.setItem('hobby', '赚钱')
    }
    document.querySelector('.btn2').onclick = function () {
      //读取数据有返回值
      localStorage.getItem('hobby')
      let res = localStorage.getItem('hobby')
      console.log(res);
    }
    document.querySelector('.btn3').onclick = function () {
      //删除数据
      localStorage.removeItem('age')
    }
    document.querySelector('.btn4').onclick = function () {
      //清空数据
      localStorage.clear()
    }
  </script>
</body>

sessionStorage

1.sessionStorage介绍

sessionStorage相当于短命版的localStorage，其他用法完全一致

<body>
  <button class="btn1">存数据setItem</button>
  <button class="btn2"> 取数据getItem</button>
  <button class="btn3">删除数据removeItem</button>
  <button class="btn4">清空数据clear</button>



  <script>
    document.querySelector('.btn1').onclick = function () {
      //存数据
      sessionStorage.setItem('uname', '长颈鹿李光洙')
      sessionStorage.setItem('age', '35')
      sessionStorage.setItem('hobby', '背叛同伴')
    }
    document.querySelector('.btn2').onclick = function () {
      //读取数据有返回值
      sessionStorage.getItem('hobby')

      let res = sessionStorage.getItem('hobby')

      console.log(res);
    }
    document.querySelector('.btn3').onclick = function () {
      //删除数据
      sessionStorage.removeItem('age')
    }

    document.querySelector('.btn4').onclick = function () {
      //清空数据
      sessionStorage.clear()
    }

  </script>

2.两者区别

相同点：

1）作用一致，都是存储数据；

2）都是存储字符串类型数据，上限为5MB；

不同点：

1）存储方式不同，从原理来说， localStorage是硬盘存储；永久存储，页面关闭仍存在硬盘 sessionStorage内存存储；临时存储，页面关闭便消失；

localStorage与sessionStorage异同点