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')

来源：oschina

链接：https://my.oschina.net/u/4334316/blog/4685415

标签

html5