本地存储方法之localStorage存储的使用

本地存储有三种方法，分别是什么呢？

有localStorage、sessionStorage、和cookie三种方法

localStorage方法的使用

在使用本地存储之前我们先看一下localStorage它是一个什么

登录后复制

//在使用之前先看一下localStorage是一个什么
console.log(localStorage)//打印效果为 Storage {length: 0}
//可以看到这是一个storage对象和sessionStorage一样就说明了sessionStorage和localStorage一样把数据存储到了storage对象中，但是存储的地方不一样罢了,现在啥都没有添加所以直接显示了长度为0

• 1.
• 2.
• 3.

(1)、存储

需要使用 localStorage.setItem() 来进行存储 括号内可以写两个参数第一个参数是存储的数据的名字可以是除了函数以外的任何一个数据类型，一般用的就是字符串数据类型第二个参数是要进行本地存储的数据，这个数据也同样可以是任何数据类型的，但是存储对象时，则必须使用JSON.stringify来进行转JSON字符串 具体存储流程如下 可以右键检查找到Application再找到localStorage查看存储的信息

登录后复制

//ES5的数据类型都可以用来当做名字，但是因为只是用来当做名字所以没必要那么麻烦
//一般都使用字符串类型
//同样存值也可以用ES5的全部数据类型，但是存储对象时需要用JSON.stringify来转化一下
localStorage.setItem({name:'对象'},'这是一个对象哟');
localStorage.setItem(null,'这是一个空哟');
localStorage.setItem(undefined,'这是一个未定义类型哟');
localStorage.setItem(123,'这是一个数值类型哟');
localStorage.setItem('name','这是一个字符串哟');

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.

如果存储对象不进行JSON.stringify转化的话看一下后台效果

这里可以看到需要JSON.stringify转化一下

甚至可以看到数组自动变成了一个字符串它的括号没有了 所以得出结论这里存储的所有值都会变成字符串数据类型再看一下使用JSON.stringify后的效果

存储讲完了

(2)、读取

再来给大家讲一下 读取localStorage.getItem() 方法一般普通的数据类型不需要使用JSON.parse() 方法把数据转为JSON对象如果不转化一下的话输出会输出一个字符串直接把内容输出了因为前面存储的时候用 JSON.stringify() 方法将这个值转化为字符串了

登录后复制

localStorage.setItem('object',JSON.stringify({name:'对象'}));
console.log(JSON.parse(localStorage.getItem('object')))//{name:'对象'}
			
localStorage.setItem('array',JSON.stringify([1,2,3]));
console.log(JSON.parse(localStorage.getItem('array')))//[1,2,3]

localStorage.setItem('null',null);
console.log(localStorage.getItem('null'))//null

localStorage.setItem('undefined','这是一个未定义类型哟');
console.log(localStorage.getItem('undefined'))//这是一个未定义类型哟

localStorage.setItem('number','这是一个数值类型哟');
console.log(localStorage.getItem('number'))//这是一个数值类型哟

localStorage.setItem('string','这是一个字符串哟');
console.log(localStorage.getItem('string'))//这是一个字符串哟

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.
• 17.

这是没有转JSON对象的输出

这是通过JSON.parse方法转化JSON对象的输出

上者和下者之间有着明显的区别

没转化的打印直接为字符串格式没有对象和数组的性质，而转化后的就明显不一样了。

(3)、删除

删除也是比较简单的，你想删除谁直接使用localStorage.removeItem() 方法括号内写要删除的之前存好的名字即可。

登录后复制

//这里有一个字符串类型的本地存储
localStorage.setItem('string','这里有一个字符串哟！')
console.log(localStorage.getItem('string'))//这是一个字符串哟！
//我们的单个删除方法
localStorage.removeItem('string');
//这里输出可以看到值为空null并不是undefined
//虽然说你没有定义吧，但是就是为null
console.log(localStorage.getItem('string'))//null

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.

(4)、清空

还有清空方法，也是比较简单的就是将所有使用清空方法前的本地存储删除localStorage.clear() 方法

登录后复制

localStorage.setItem('object',JSON.stringify({name:'对象'}));
console.log(JSON.parse(localStorage.getItem('object')))//{name:'对象'}

localStorage.setItem('array',JSON.stringify([1,2,3]));
console.log(JSON.parse(localStorage.getItem('array')))//[1,2,3]

localStorage.setItem('null',null);
console.log(localStorage.getItem('null'))//null

localStorage.setItem('undefined','这是一个未定义类型哟');
console.log(localStorage.getItem('undefined'))//这是一个未定义类型哟

localStorage.setItem('number','这是一个数值类型哟');
console.log(localStorage.getItem('number'))//这是一个数值类型哟

localStorage.setItem('string','这是一个字符串哟');
console.log(localStorage.getItem('string'))//这是一个字符串哟

//但是在使用这个方法之前还是可以使用这些本地存储的
localStorage.clear() //把之前的存储全部清空

//清空之后就会把之前存储好的本地存储全部清空
console.log(JSON.parse(localStorage.getItem('object')))//null
console.log(JSON.parse(localStorage.getItem('array')))//null
console.log(localStorage.getItem('null'))//null
console.log(localStorage.getItem('undefined'))//null
console.log(localStorage.getItem('number'))//null
console.log(localStorage.getItem('string'))//null
console.log(localStorage.getItem('string'))//null

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.
• 17.
• 18.
• 19.
• 20.
• 21.
• 22.
• 23.
• 24.
• 25.
• 26.
• 27.
• 28.
• 29.

这是清空之前的输出

这是使用清空方法后的输出

sessionStorage是本地存储的暂时性存储在你退出浏览器之后就会清除存储，而且刷新之后也还在而localStorage是本地存储的永久存储，就算退出浏览器也不会清除存储

就说这么多