localStorage获取数据以及处理方法

本文介绍了如何在JavaScript中使用localStorage进行数据存储,并探讨了字符串与对象之间的转换方法。了解如何将JavaScript对象转换为字符串以便存储,以及如何将字符串转换回对象以供使用。
关于字符串和对象
1.localStorage中只能存字符串,如果直接把对象放到localStorage中,则直接保存object object这个字符串
2.如果调用localStorage的getItem("carts")方法得到的信息也是字符串
3.js和字符串的转换
js对象---->字符串:var str=JSON.stringfy(js对象)
字符串----->js对象:var obj=JSON.parse(字符串);

例如字符串和对象
class Person extends Object{
String name;
}

Person p=new Person();这是一个JAVA对象,转为字符串,用tostring方法


总之,从本地获取数据得到的是字符串,要先从字符串转为js对象(数组),同理,最后用完了数据要转成字符串再存入本地,代码如下:

var books=localStorage.getItem("carts");//得到字符串
var bookArr=JSON.parse(books);
var s=JSON.stringify(bookArr);
localStorage.setItem("carts",s);


### 如何读取或获取浏览器 LocalStorage 中的数据 为了从 `localStorage` 中检索之前保存的信息,可以使用 JavaScript 的 `getItem()` 方法。此方法接收一个键名作为参数并返回对应的值。 ```javascript // 假设已经通过 setItem() 存储了一个名为 'username' 的条目 let storedUsername = localStorage.getItem("username"); console.log(storedUsername); // 输出: John Doe 或者其他先前设定的用户名字符串 ``` 如果尝试访问不存在的键,则会得到 `null` 返回值[^2]。 除了单独获取特定项之外,还可以遍历整个 `localStorage` 对象来查看所有已存入的数据: ```javascript for (let key in localStorage) { if (!isNaN(key)) continue; // 跳过索引编号 console.log(`${key}: ${localStorage[key]}`); } ``` 另外值得注意的是,虽然 `localStorage` 提供了一种简单的方式来保持数据不随页面刷新而消失,但是它并不适合处理敏感信息,因为任何能够运行脚本的人都能轻易读取其中的内容[^3]。 #### 清除 LocalStorage 数据 有时可能需要清除部分或者全部存储于 `localStorage` 内的数据。为此提供了两个专门的方法——`removeItem()` 和 `clear()`: - `removeItem(key)` 可用于删除指定名称的数据; - `clear()` 则是用来一次性移除所有的本地存储项目。 ```javascript // 删除单个项目 localStorage.removeItem('username'); // 移除所有项目 localStorage.clear(); ``` 以上就是关于如何操作 HTML5 Web Storage API 下面提到的 `localStorage` 接口的一些基本说明和实例代码[^5]。
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值