本地存储 localStorage 使用

本文介绍如何利用LocalStorage实现A页面向B页面传递数据的方法,适用于没有Vue的prop传值场景,通过实例演示了存储、读取和清除数据的过程。

 

当页面跳转,A页面的数据,跳转到 B 页面后,需要将数据传值过去,

但没有vue的prop传值,就是用jquery,要怎么传值呢?

 

这里有种简便方法,就是本地存储,我用的是 localStorage

  • 存储数据:localStorage.setItem('roomData',nsarr)   // roomData 为数据变量名,nsarr 为要存储的数据变量
  • 取数据:    localStorage.getItem('roomData')
  • 清除数据: localStorage.removeItem('roomData')

我做的页面需求是选中楼层,确认后跳转B页面,房间数据需要传过去。


只要一个房间被点击,就判断当前是选中还是取消选中
选中就加上选中样式,然后获取里面的值,存入数组,取消选中则反之
初始就一个空数组,那每次只会有一个房间被点击,然后房间被选中,

就往数组塞数据,如果取消选中,就把这个房间的数据从数组删掉。

 

那么我是在 A 页面存储数据,在 B 页面取出数据。

当选中两个数据:

 

打印出来如下:

 

如果 Application 有值,证明数据存储成功。

 

注意: 

本地存储,只能存储字符串 ,存对象,会先把对象 toString 为字符串后再存进去,所以需要一个字符串和对象之间的转化。

存的时候,需要转化为字符串

取出来的时候,通常都会将字符串转化为对象

### 使用 `localStorage` 进行本地数据存储 在 JavaScript 中,`localStorage` 提供了一种简单的方法来保存客户端的数据。这些数据即使浏览器关闭后仍然存在,除非被手动清除。 #### 存储数据到 `localStorage` 要向 `localStorage` 添加数据,可以使用如下方法: ```javascript // 设置键localStorage.setItem('key', 'value'); ``` 由于 `localStorage` 只能存储字符串形式的数据,因此当需要存储复杂对象时,通常会先将其转换成 JSON 字符串[^1]。 ```javascript const user = { name: "John", age: 30 }; localStorage.setItem('user', JSON.stringify(user)); ``` #### 获并显示 `localStorage` 数据 为了从 `localStorage` 中读之前存入的信息,并展示在一个输入框内,可采用下面的方式获指定键对应的[^2]: ```javascript // 获单个项 let storedUserString = localStorage.getItem('user'); if (storedUserString !== null) { let storedUserObject = JSON.parse(storedUserString); document.getElementById('output').value = `${storedUserObject.name}, ${storedUserObject.age}`; } ``` 这里假设页面上有一个 ID 为 `'output'` 的 `<input>` 或者其他类型的表单控件用于呈现结果。 #### 遍历所有的 `localStorage` 键名 如果想要遍历整个 `localStorage` 并处理其中每一项,则可以通过循环访问其所有键来进行操作[^3]: ```javascript for (let i = 0; i < localStorage.length; i++) { const keyName = localStorage.key(i); console.log(`Key: ${keyName} Value: ${localStorage.getItem(keyName)}`); } ``` 需要注意的是,在某些情况下(比如通过文件协议加载网页),可能会遇到刷新之后 `localStorage` 被清空的问题;这可能是由于特定环境下的安全策略所引起的[^4]。 对于安全性考虑,虽然 `localStorage` 方便易用,但在涉及敏感信息如 JWT token 等场景下应谨慎选用,因为相比于 Cookies 它更容易受到跨站脚本攻击的影响[^5]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值