DOM

localStorage

<body>

    <button class="btn1">setItem</button>
    <button class="btn2">getItem</button>
    <button class="btn3">removeItem</button>
    <button class="btn4">clear</button>

    <script>

        let btn1 = document.querySelector('.btn1')
        let btn2 = document.querySelector('.btn2')
        let btn3 = document.querySelector('.btn3')
        let btn4 = document.querySelector('.btn4')

        btn1.onclick = function () {
            //存

            localStorage.setItem('username', 'lhy')
            localStorage.setItem('password', '123')
            localStorage.setItem('nickname', 'ikun')
            localStorage.setItem('age', '21')
        }

        btn2.onclick = function () {
            //取

            console.log(localStorage.getItem('age'))

        }

        btn3.onclick = function () {
            //删

            localStorage.removeItem('nickname')

        }

        btn4.onclick = function () {
            //清空

            localStorage.clear()

        }
        
    </script>

</body>

sessionStorage

<body>

    <button class="btn1">setItem</button>
    <button class="btn2">getItem</button>
    <button class="btn3">removeItem</button>
    <button class="btn4">clear</button>

    <script>

        let btn1 = document.querySelector('.btn1')
        let btn2 = document.querySelector('.btn2')
        let btn3 = document.querySelector('.btn3')
        let btn4 = document.querySelector('.btn4')

        btn1.onclick = function () {
            //存

            sessionStorage.setItem('username', 'lhy')
            sessionStorage.setItem('password', '123')
            sessionStorage.setItem('nickname', 'ikun')
            sessionStorage.setItem('age', '21')
        }

        btn2.onclick = function () {
            //取

            console.log(sessionStorage.getItem('age'))

        }

        btn3.onclick = function () {
            //删

            sessionStorage.removeItem('nickname')

        }

        btn4.onclick = function () {
            //清空

            sessionStorage.clear()

        }
    </script>

</body>

localStorage与sessionStorage的区别（异同点）

相同点 : 作用一致，都是用于存储数据

不同点 : 存储方式不同

localStorage : 硬盘存储
sessionStorage : 内存存储

WebAPI基础知识回顾

DOM

localStorage

sessionStorage