[BOM-本地存储] JS-web-api

本地存储介绍

本地存储分类-- localStorage

        // localStorage.setItem('键','值')
        
//增  与   改        
        localStorage.setItem('uname','pink')// 这是增加，如果本地有就更改值本地没有就增加
        localStorage.setItem('uname','red')

        localStorage.setItem('age','18')//本地存储存储的数据只能是字符串    18也是字符串

//删除
        localStorage.removeItem('age')

// 查询  获取  并将打印出来
        console.log(localStorage.getItem('uname'))

在这里可以查询看到本地的存储数据

本地存储分类-sessionStorage

sessionStorage  和   localStorage  用法是一样的，

区别sessionStorage在关闭窗口数据会被清除，而localStorage里面的数据不会被清除

列如： sessionStorage.setItem('关闭就会消失','消失了嘛')   

 在这里查看

存储复杂数据

想一次性存储多个数据，可以放在对象一次性存储，但是，本地存储只能存字符串不能直接存对象，所以，要先把其对象转换为JSON字符串，之后获取使用时转换为对象

    <script>
        // 本地存储是不能直接存储对象
        const obj = {
            name:'猪猪猪',
            age:18,
            gender:'男'
        }

  // 需要把对象转换为JSON.stringify() 字符串型    注意：他被转换为字符串了，已经不是对象了
        localStorage.setItem('obj',JSON.stringify(obj))
        console.log(localStorage.getItem('obj')) //字符串型
        console.log(typeof localStorage.getItem('obj')) //字符串型

  // 为了方便使用存储的对象，所以要把原本转为字符串的对象再次转回为对象，方便后面使用

 // 核心思路：把接收到的字符串传给JSON.parse()       
        console.log(JSON.parse(localStorage.getItem('obj')))//转为对象
    </script>