javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > js localStorage本地存储

javascript中localStorage本地存储(新增、删除、修改)使用详细教程

作者:街尾杂货店&

本地存储localstorage是一种在浏览器中存储数据的方式,可以将数据保存在用户的本地计算机上,以便在下一次访问网站时使用,下面这篇文章主要给大家介绍了关于javascript中localStorage本地存储(新增、删除、修改)使用详细教程,需要的朋友可以参考下

介绍

现在前端做数据存储,跨页面传值,localStorage是一个很好的方式,以键值对的方式存储,也方便取值赋值,下面说一说使用方法和一些常见的使用技巧。

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

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

取值也是如此,自身的方法是getItem

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

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

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

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

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

获取所有的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);
}

获取所有的值

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

清除所有的值

localStorage.clear()

判断是否具有某个key,hasOwnProperty方法

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

使用技巧

需要注意的是:

1、浏览器限制localStorage的值类型为string类型,如果存储的数据不是string类型,localStorage会自动对数据进行类型转换;

2、存储的Json对象数据时,需要使用JSON.stringify()方法将数据转换成Json字符串,读取时,使用JSON.parse()将Json字符串还原回去;

例如:

需要往localStorage中存储一个对象person:

let person = {
    name: 'Ryan Xu',
    age: 18;
}

如果不使用JSON.stringify()处理:

window.localStorage.setItem('person1', person);
console.log(window.localStorage);

对于对象类型数据,如果不进行处理直接存入localStorage中时,localStorage会自动进行数据类型转换,对象就会被转换成[object Object],不是我们想要的结果;

如果使用JSON.stringify()处理:

window.localStorage.setItem('person1', JSON.stringify(person));
console.log(window.localStorage);

从上面可以发现,对于对象类型数据,储存到localStorage中时应使用JSON.stringify()方法将数据转换成Json字符串再储存,同样的,读取时应将读取结果使用JSON.parse()还原回去。

总结

到此这篇关于javascript中localStorage本地存储(新增、删除、修改)使用的文章就介绍到这了,更多相关js localStorage本地存储内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文