1-localstorage

1.localStorage:本地存储

将数据存储到浏览器

2.语法

存： localStorage.setItem('属性名','属性值')

取： localStorage.getItem('属性名')

删： localStorage.removeItem('属性名')

清空： localStorage.clear()

3.注意点

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <button id="btn1">存储据</button>
    <button id="btn2">取储据</button>
    <button id="btn3">删储据</button>
    <button id="btn4">清空储据</button>

    <script>


        //存
        document.getElementById('btn1').onclick = function(){
            localStorage.setItem('name','班长');
            localStorage.setItem('age',18);
            localStorage.setItem('girlFriend',['张三','李四','王五']);
        }

        //取
        document.getElementById('btn2').onclick = function(){
            let age = localStorage.getItem('age');
            console.log(age); 
        }

        //删
        document.getElementById('btn3').onclick = function(){
            localStorage.removeItem('girlFriend'); 
        }

        //清空:一次性删除所有数据
        document.getElementById('btn4').onclick = function(){
            localStorage.clear(); 
        }
    </script>
</body>
</html>
复制代码

2-sessionStorage

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

2.两者区别：HP值不同

localStorage：永久存储（存在硬盘，HP值无限）

sessionStorage：临时存储（存在内存，HP值一条命，只要浏览器关闭就没有了）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <button id="btn1">存储据</button>
    <button id="btn2">取储据</button>
    <button id="btn3">删储据</button>
    <button id="btn4">清空储据</button>

    <script>
        //存
        document.getElementById('btn1').onclick = function(){
            sessionStorage.setItem('name','班长');
            sessionStorage.setItem('age',18);
            sessionStorage.setItem('girlFriend',['张三','李四','王五']);
        }

        //取
        document.getElementById('btn2').onclick = function(){
            let age = sessionStorage.getItem('age');
            console.log(age); 
        }

        //删
        document.getElementById('btn3').onclick = function(){
            sessionStorage.removeItem('girlFriend'); 
        }

        //清空:一次性删除所有数据
        document.getElementById('btn4').onclick = function(){
            sessionStorage.clear(); 
        }
    </script>
</body>
</html>
复制代码

3-localStorage如何存储对象类型数据

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <button class="btn1">点我存储</button>
    <button class="btn2">点我读取</button>
    <script>
      /* 
        1.localStorage如何存储对象类型数据： 使用JSON格式字符串

        2.JSON对象是什么 ： 本质是一种字符串格式
            '{"name":"admin","password","123456"}'
        3.JSON对象作用： 解决跨平台兼容性
            * 实际开发中，我们的数据来源于服务器。 而服务器并不一定是用js语言开发的，例如python、java、c++等，
            不同的编程语句数据类型是不一样的。为了解决这个问题，人们发明了一种所有编程之言都支持的格式，就是JSON格式对象。 json格式本质是一个字符串，里面所有的数据都要用双引号包起来
        4.JSON与js互转
            4.1 json转js : JSON.parse(json对象)
            4.2 js转json :  JSON.stringify(js对象)
         */

      let json = '{"name":"admin","password":"123456"}'
      console.log(JSON.parse(json))

      let js = { name: 'admin', password: 123456 }
      console.log(JSON.stringify(js))

      document.querySelector('.btn1').onclick = function () {
        //存储： 将js对象转成json格式字符串
        localStorage.setItem('user', JSON.stringify(js))
      }

      document.querySelector('.btn2').onclick = function () {
        //读取： 将读取到的json格式字符串转成对象
        //1.先读取json格式
        let json = localStorage.getItem('user')
        //2.然后转成js对象
        let js = JSON.parse(json)
        console.log(js)
      }
    </script>
  </body>
</html>
复制代码

总结

locationStorage与sessionStorage的区别

作用一致: 都是存储数据(只能存储字符串)
locationStorage是在硬盘存储, sessionStorage是在内存存储
locationStorage应用场景: 免登陆
sessionStorage应用场景: 页面间传值
语法一致:

设置: setItem('属性名',属性值)
获取: getItem('属性名') 会有一个返回值
删除: removeItem('属性名)
清空: clear()

localstorage和sessionStorage的区别

1-localstorage

2-sessionStorage

3-localStorage如何存储对象类型数据

总结