js——本地存储

一、本地存储

 1.l ocalStorage 作用是什么?

    可以将数据永久存储在本地(用户的电脑)，除非手动删除，否则关闭页面也会存在。

  2. localStorage 存储，获取，删除的语法是什么?

    存储:localStorage.setltem('key', 'value')

    获取:localStorage.getltem('key')

    册除:localStorage.removeltem('key')

 <script>
    // localStorage.setItem('键', '值')  存储方式
    localStorage.setItem('uname', '楠楠')
    // 获取方式
    console.log(localStorage.getItem('uname'));
    // 删除本地存储方式
    // localStorage.removeItem('uname')
    // 修改本地存储：有这个键则是改，没有则是增
    localStorage.setItem('uname', '楠楠a')
    localStorage.setItem('age', '22')
    // 本地存储只能存储字符串数据类型
    console.log(localStorage.getItem('age'));
  </script>

浏览器查看本地数据：

 

二、本地存储复杂数据类型 

本地只能存储字符串，无法存储复杂数据类型

 const obj = {

      uname: '楠',

      age: 18,

      gender: '女'

    }

    // 存储复杂数据类型 无法直接使用，只能存储字符串

    localStorage.setItem('obj', obj)

    console.log(localStorage.getItem('obj'));

 

解决方法：需要将复杂数据类型转换成JSON字符串，再存储到本地

语法： JSON.stringify(复杂数据类型)

问题：因为本地存储里面取出来的是字符串，不是对象，无法直接使用。

 

 解决方法：把取出来的字符串转换为对象

 语法：JSON.parse(JSON字符串)

 本节完整代码：

<script>
    const obj = {
      uname: '楠',
      age: 18,
      gender: '女'
    }
    // 存储复杂数据类型 无法直接使用，只能存储字符串
    localStorage.setItem('obj', obj)
    console.log(localStorage.getItem('obj'));

    // 存：存储复杂数据类型 必须转换为json字符串存储
    localStorage.setItem('obj', JSON.stringify(obj))
    console.log(localStorage.getItem('obj'));

    // 取：json字符串转换为对象
    // console.log(JSON.parse(localStorage.getItem('obj')));
    // const str = localStorage.getItem('obj')
    // console.log(JSON.parse(str));
  </script>