1. localStorage对象

localStorage：本地存储（是window下面的一个对象），每个网站会有一个自己独立的localstorage

应用：用户在登录页免登陆

语法（直接调用localStorage里面的方法） ：

• 存数据 ： localStorage.setItem('属性名',属性值)->相同的属性名会进行修改

• 取数据（有返回值） ： localStorage.getItem('属性名')

• 删数据 : localStorage.removeItem('属性名')

• 清空数据 : localStorage.clear()

  注意点 ：

  • 永久存储 ： 数据存在硬盘中（关机了仍然存在），每个网站的localStorage是独立的，是认域名的
  • 只能存储string类型数据, 如果存储其他类型编译器会自动转换string类型存储

        // 存数据 ：  localStorage.setItem('属性名',属性值)
           document.querySelector('.setItem').onclick = function () {
               localStorage.setItem('name', '张三')
               localStorage.setItem('pwd', 'xsss')
               localStorage.setItem('age', '23')
               localStorage.setItem('age', {
                   name: '1111'
               })
           }
   
           // 取数据 ：  localStorage.getItem('属性名')
           document.querySelector('.getItem').onclick = function () {
               let pwd = localStorage.getItem('pwd')
               console.log(pwd)
           }
   
           // 删数据 :   localStorage.removeItem('属性名')
           document.querySelector('.removeItem').onclick = function () {
               localStorage.removeItem('age')
           }
   
           //清空数据 : localStorage.clear()
           document.querySelector('.clear').onclick = function () {
               window.localStorage.clear()
           }

类似于dom里面的setAttribute（没有clear）用来存储数据

2. sessionStorage对象

sessionStorage : 会话存储（也是一个对象）

作用：用来临时存储

应用场景： 页面间传值（移动端使用比较多，上一页的数据移动到下一页时把上一页的数据传到下一页，页面数据在页面跳转时，内存消失），其实vue中是用url传值的

语法（用法同localStorage一模一样） ：

• 存数据 ： sessionStorage.setItem('属性名',属性值)
• 取数据 ： sessionStorage.getItem('属性名')
• 删数据 : sessionStorage.removeItem('属性名')
• 清空数据 : sessionStorage.clear()

注意点 ：

• 临时存储 ： 数据存在内存中, 页面一旦关闭数据自动清空（内存就是这个特点，一关闭里面存的东西都没了）
• 只能存储string类型数据, 如果存储其他类型编译器会自动转换string类型存储

3. localStorage与sessionStorage的异同点

• 相同点： 作用一致，都是存储数据

• 不同点： 存储方式不同

  • localStorage : 硬盘存储（永久存储）
  • sessionStorage : 内存存储（临时存储）

4. json解决localStorage对象存储问题

由于localStorage和sessionStorage只能存储string类型，导致js对象数据类型无法存储，这里可以转换成json格式从而解决这一问题，JSON 是一种数据格式，本质就是字符串，用来解决数据 跨平台（前后端）传输的兼容性

简单介绍一下json的格式转换：

• json -> js : let jsObj = JSON.parse( json格式 )
• js -> json : et jsonStr = JSON.stringify( js对象 )

        let obj = {
            name: '张三',
            age: 20,
            sex: '男'
        }

        document.querySelector('.btn1').onclick = function () {
            //存 ： （1）js -> json  （2）存json
            // //（1）js->json
            // let jsonStr = JSON.stringify( obj )
            // //（2）存json
            // localStorage.setItem('user',jsonStr)

            //合写一行
            localStorage.setItem('obj', JSON.stringify(obj))
        }

        document.querySelector('.btn2').onclick = function () {
            //取: （1）取json  （2）json->js
            // //（1）取json
            // let jsonStr = localStorage.getItem('user')
            // //（2）json->js
            // let jsObj = JSON.parse( jsonStr )
            //合写一行
            console.log(JSON.parse(localStorage.getItem('obj')))
        }