本地存储---拓展：自定义属性本地存储随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各

本地存储

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案。

1、数据存储在用户浏览器中 2、设置、读取方便、甚至页面刷新不丢失数据 3、容量较大，sessionStorage和localStorage约 5M 左右

localStorage

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

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

3、以键值对的形式存储使用

存储数据：

localStorage.setItem(key, value)

获取数据：

localStorage.getItem(key)

删除数据：

localStorage.removeItem(key)

localStorage基本使用 --存取数据：

<body>
    <script>
        //存储日期
        // localStorage.setItem('自定义'，值-必须是字符串的格式)

       //存储日期
         localStorage.setItem('date','二零二二年四月十五日 23:40:58')
         //获取它
         const date = localStorage.getItem('date');
        console.log(date);
    </script>
</body>

本地存储的拓展

<body>
    <script>
        //本地存储  存储数据类型 不管你传入什么类型 最终都会被转换成字符串类型
        //数组和对象 合适管理 比较复杂的数据
        const obj =  {
            name:'路飞',
            height:100,
            weught:200};
       //把对象转成字符串
       const objs = JSON.stringify(obj);

            //把字符串 --》本地存储 
            localStorage.setItem('obj',objs);
            //把本地存储的数据重新读取出来
            const newObjs = localStorage.getItem('obj');
            // console.log(newObjs);

            //把字符串解析成原来的对象
            const newObj = JSON.parse(newObjs);
            console.log(newObj);

            /*
            1.本地存储无法存储 复杂类型的数据
            2.复杂类型的数据 通过JSON对象 字符串 相互之间的转换*/

    </script>
</body>

小总结：

存储复杂数据类型存储
本地只能存储字符串,无法存储复杂数据类型.需要将复杂数据类型转换成JSON字符串,在存储到本地
JSON.stringify(复杂数据类型)
将复杂数据转换成JSON字符串存储本地存储中
JSON.parse(JSON字符串)
将JSON字符串转换成对象取出时候使用

本地存取四个api

存 localStorage.setItem('abc',1223)
取 localStorage.getItem(key)
删除一个 localStorage.removeItem(key)
清空 localStorage.clear()

拓展：自定义属性

固有属性: 标签天生自带的属性比如class id title等, 可以直接使用点语法操作自定义属性: 由程序员自己添加的属性,在DOM对象中找不到, 无法使用点语法操作,必须使用专门的API getAttribute('属性名') // 获取自定义属性 setAttribute('属性名', '属性值') // 设置自定义属性 removeAttribute('属性名') // 删除自定义属性

1650048240827