18.本地存储

18.1本地存储分类- localStorage

1.作用:
可以将数据永久存储在本地(用户的电脑),除非手动删除,否则关闭页面也会存在

2.特性:
●可以多窗口(页面)共享(同一浏览器可以共享)
●以键值对的形式存储使用,键值除了数字型都要加引号

3.语法

存储数据:
localStorage.setltem('key', 'value')
获取数据:
localStorage.getltem('key')
删除数据:
localStorage.removeltem('key')  

注意:本地存储只能存储字符串数据类型
在这里插入图片描述

18.2本地存储分类- sessionStorage

特性:
●生命周期为关闭浏览器窗口
●在同一个窗口(页面)下数据可以共享
●以键值对的形式存储使用
●用法跟 localStorage基本相同

18.3存储复杂数据类型

本地只能存储字符串,无法存储复杂数据类型.
例如:
在这里插入图片描述
显示为object
在这里插入图片描述
●解决: 需要将复杂数据类型转换成JSON字符串,再存储到本地
●语法:

JSON.stringify(复杂数据类型)

➢将复杂数据转换成JSON字符串 存储 在本地存储中
在这里插入图片描述
●问题:因为本地存储里面取出来的是字符串,不是对象,无法直接使用
在这里插入图片描述
●解决:把取出来的字符串转换为对象
●语法:JSON.parse(JSON字符串)

const obj = JSON.parse( localStorage.getItem( 'goods' ))
console.log(obj)

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

<body>
    <script>
        const obj = {
            uname: 'Kai',
            age: 18,
            gender: '女'
        }
        // 1. 复杂数据类型存储必须转换为 JSON字符串存储
        localStorage.setItem('obj', JSON.stringify(obj))
        // console.log(localStorage.getItem('obj'))  //得到的是字符串
        // 2. 把JSON字符串转换为 对象
        const str = localStorage.getItem('obj')
        console.log(JSON.parse(str))
    </script>
</body>

复杂数据类型转换为JSON得到的是字符串,所以取出时要将JSON字符串转换为对象
在这里插入图片描述

18.4数组中map方法迭代数组

●使用场景:
map可以遍历数组处理数据,并且返回新的数组
在这里插入图片描述
map也称为映射。映射是个术语,指两个元素的集之间元素相互“对应”的关系。
map重点在于有返回值,forEach没有返回值

18.5数组中join方法

●作用:
join()方法用于把数组中的所有元素转换为一个字符串

●语法:
在这里插入图片描述

●参数:
数组元素是通过参数里面指定的分隔符进行分隔的,空字符串(") ,则所有元素之间都没有任何字符。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值