js中基本数据存储

本地存储

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案。
1、数据存储在用户浏览器中
2、设置、读取方便、甚至页面刷新不丢失数据
3、容量较大，sessionStorage和localStorage约 5M 左右

localStorage

生命周期永久生效，除非手动删除 否则关闭页面也会存在

可以多窗口（页面）共享（同一浏览器可以共享）

以键值对的形式存储使用

存储数据

localStorage.setItem(key,value)//key必须是字符串的形式

获取数据

localStorage.getItem(key)

删除数据

localStorage.removeItem(key)

清空数据

localStorage.clear()

    <button class="set">存入</button>
    <button class="get">获取</button>
    <script>
        const btn1 = document.querySelector('.set')
        const btn2 = document.querySelector('.get')

            //给按钮绑定事件，点击存入即可将数据存储到本地
        btn1.addEventListener('click', function() {
                localStorage.setItem('name', '刘德华')
            })
            //绑定事件，点击获取按钮即可获取数据name
        btn2.addEventListener('click', function() {
            let name = localStorage.getItem('name')
            console.log(name);
        })

sessionStorage

存储数据

sessionStorage.setItem(key,value)//key必须是字符串的形式

获取数据

sessionStorage.getItem(key)

删除数据

sessionStorage.removeItem(key)

清空数据

sessionStorage.clear()

总结:

以上的key值必须是字符串形式

localStorage和sessionStorage的区别就是localStorage是将数据存储在本地存储当中,页面重新打开或刷新不会收到影响

而sessionStorage存储仅仅是将数据存储在网页中,当网页重新打开或刷新时会丢失

存储复杂数据类型存储

本地只能存储字符串,无法存储复杂数据类型.需要将复杂数据类型转换成JSON字符串,在存储到本地

JSON.stringify(复杂数据类型)

将复杂数据转换成JSON字符串 存储本地存储中

const arrStr = JSON.stringify(arr)//arr是复杂数据类型,如数组或者对象

JSON.parse(JSON字符串)

将JSON字符串转换成对象 取出时候使用

const arr = JSON.parse(arrStr)//arrStr是复杂数据类型存储时转换的字符串