H5本地存储

目录

1、localStorage

2、查看本地存储

3、写入数据

4、读取数据

5、删除某个键

---

在没有学习如果操作数据的情况下，如何将数据存储起来，确保刷新页面或者关闭浏览器，或者重启电脑，数据就丢失呢？

使用本地存储可以完美解决这个问题

本地存储技术学习起来很简单，就那么几个方法，关键在于理解本地存储其实就是将数据存储在硬盘中

浏览器提供了几个API，我们可以使用JS调用这些API，实现本地存储的写入、读取以及删除

1、localStorage

localStorage 对象与前面学过的 Math对象等一样，其内置了一些方法，能够向用户的本地（其实就是用户的硬盘上）写入数据，或者读取数据

其主要有4个方法

使用下面代码，就可以向本地存储指定的数据

// 写入数据 localStorage.setItem('键','值') // 根据键读取数据，返回值就是对应的值 var value=localStorage.getItem('键') // 删除指定的键 localStorage.removeItem('键') // 删除所有的键 localStorage.clear()

2、查看本地存储

通过浏览器的开发这工具，可以查看本地存储中的数据

后面我们可以通过这里检测代码的运行结果

3、写入数据

参数1称作键，参数2称作值，键的名称随意

localStorage.setItem('name','yhb') localStorage.setItem('age',18)

代码执行结束后，查看开发者工具

下面写入一个对象

setitem 方法要求键和值都必须是字符串类型，所以存储前先将对象转换为字符串类型 var person={name:'yhb',age:18,gender:'男'} // 存储之前先将 person 转换为 string 类型 var str_Person=JSON.stringify(person) // 第一个参数称作键，第二个参数称作值，键的名称随意 localStorage.setItem('person',str_Person)

此时无论刷新页面或者重启浏览器甚至重启电脑，再次打开这个页面，数据仍然存在

4、读取数据

存储数据的目的是为了使用

读取数据的使用 getItem 方法，参数为 键的名称

// 读取本地存储中，键的名称为 name 对应的值 var n=localStorage.getItem('name') console.log(n) var age=localStorage.getItem('age') console.log(age)

结果

读取对象

var str=localStorage.getItem('person') // 此时是字符串类型，所以无法通过对象.属性的方式获取其中的数据 console.log(typeof str); // 需要先将其转换为 object 类型 var person=JSON.parse(str) console.log(typeof person); // 读取 name 属性的值 console.log(person.name);

5、删除某个键

下面代码在本地存储中删除键为 name 的数据

localStorage.removeItem('name')