数据存储的方法之localstorage

目录

1.存值

2.取值

3.修改

4.移除

5.获取所有的key

6.获取所有的值

7.清除所有的值

8.判断是否含有某个key

9.使用技巧

10.注意事项


现在前端做数据存储、跨页面传值,localStorage是一个很好的方式,以键值对的方式存储。

1.存值

存值共有3种方式,localStorage相当于window对象下面的一个属性,所以有[ ]和 调用,还具有自身的setItem方法。

// 自身方法
localStorage.setItem("name","bonly");
// []方法
localStorage["name"]="bonly";
// .方法
localStorage.name="bonly";

2.取值

 和存值相同,取值也是[ ]和 调用,还具有自身的getItem方法。

// 自身方法
localStorage.getItem("name");
// []方法
localStorage["name"];
// .方法
localStorage.name;

3.修改

改变就相当于给对应的key重新赋值,就会把原来的值覆盖掉。

// 自身方法
localStorage.setItem("name","TOM");
// []方法
localStorage["name"]="TOM";
// .方法
localStorage.name="TOM";

4.移除

移除某一个值,可以通过对象删除属性的关键字delete,也可以用自身的方法removeItem。

// 自身方法
localStorage.removeItem("name");
// []方法
delete localStorage["name"];
// .方法
delete localStorage.name

5.获取所有的key

可以使用for循环直接拿到localstorage的key

// 通过自身的key
for (var i=0;i<localStorage.length;i++) {
	console.log(localStorage.key(i));
}

// 通过for in 循环获取
for(var key in localStorage){
	console.log(key);
}

6.获取所有的值

localStorage.valueOf();取出所有的值

7.清除所有的值

localStorage.clear()

8.判断是否含有某个key

// 如果存在的话返回true,不存在返回false
localStorage.hasOwnProperty("name")

9.使用技巧

1.先判断浏览器是否支持localStorage,通过if(!window.localStorage) return;
2.单词太长,不方便书写,可以利用 var storage=window.localStorage;
3.字符串和原始类型需要通过JSON.stringfy转字符串,通过JSON.parse转成对象
4.通过封装方法实现来回转化

10.注意事项

1.localStorage特定于页面的协议,不是同一域名,不能访问。
2.有长度限制,5M左右,不同浏览器大小会有不同。
3.生命周期是永久的,但是数据实际是存在浏览器的文件夹下,可能卸载浏览器就会删除。
4.浏览器可以设置是否可以访问数据,如果设置不允许会访问失败。
5.兼容IE8以上浏览器
6.只能存储字符串类型,需要转成字符串存储。

  • 2
    点赞
  • 29
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
在 Web 应用程序中,我们经常需要在浏览器中保存一些数据,以便在下一次访问应用程序时可以直接读取这些数据。为了实现这个功能,Web 浏览器提供了两种本地数据存储方式:`localStorage` 和 `sessionStorage`。 `localStorage` 和 `sessionStorage` 都是浏览器提供的 JavaScript API,可以用来在浏览器中保存和读取数据。它们的主要区别在于数据的生命周期和作用域。 `localStorage` 中保存的数据是永久性的,除非用户手动清除,否则数据将一直保存在浏览器中。而 `sessionStorage` 中保存的数据只在当前会话中有效,当用户关闭浏览器窗口或标签页时,数据将被删除。 另外,`localStorage` 中保存的数据可以在不同的窗口或标签页中共享,而 `sessionStorage` 中保存的数据只能在同一个窗口或标签页中共享。 在 JavaScript 中,我们可以使用以下代码来读取和保存数据到本地存储中: ``` // 保存数据localStoragelocalStorage.setItem('key', 'value') // 从 localStorage 中读取数据 const value = localStorage.getItem('key') // 从 localStorage 中删除数据 localStorage.removeItem('key') // 清空 localStorage 中的所有数据 localStorage.clear() ``` 类似地,我们可以使用 `sessionStorage` 来读取和保存数据: ``` // 保存数据到 sessionStorage 中 sessionStorage.setItem('key', 'value') // 从 sessionStorage 中读取数据 const value = sessionStorage.getItem('key') // 从 sessionStorage 中删除数据 sessionStorage.removeItem('key') // 清空 sessionStorage 中的所有数据 sessionStorage.clear() ``` 需要注意的是,`localStorage` 和 `sessionStorage` 中只能保存字符串类型的数据,如果需要保存其他类型的数据,需要先将其转换为字符串类型。例如,我们可以使用 `JSON.stringify` 方法将 JavaScript 对象转换为字符串,然后再保存到本地存储中。在读取数据时,需要使用 `JSON.parse` 方法将字符串转换为 JavaScript 对象。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值