javascript中localStorage本地存储怎么使用

这篇文章主要介绍“javascript中localStorage本地存储怎么使用”，在日常操作中，相信很多人在javascript中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

使用技巧

• localStorage特定于页面的协议，不是同一域名，不能访问。

• 有长度限制，5M左右，不同浏览器大小会有不同。

• 生命周期是永久的，但是数据实际是存在浏览器的文件夹下，可能卸载浏览器就会删除。

• 浏览器可以设置是否可以访问数据，如果设置不允许会访问失败。

• 兼容IE8以上浏览器

• 只能存储字符串类型，需要转成字符串存储。

需要注意的是：

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本地存储怎么使用”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！