我们可以使用 localStorage 的 key ，还有 length 属性 … … 循环去处理存储的数据项目 .. 比如可以在页面上显示出这些数据 …

key 可以根据数据的序号返回数据的名称 .. length 属性可以返回数据项目的数量 …

准备

先打开 index.html … 在这个页面上 … 我添加了一个用来显示 localStorage 数据的容器 … 上面定义了一个 storage-data 的 ID ..

默认这个容器里面，会显示一条提醒的信息 … 还没有设置 localStorage 数据 !

另外还有在前面视频里用来设置和清空数据的按钮 ...

script.js

再打开这个页面使用的 script.js ..

跟上一个视频类似 … 现在这个 script.js 做的事情就是，点击 设置数据项目 按钮的时候，执行 setStorage() 去添加几个数据项目 ..

点击 清除数据项目 按钮的时候 ，会执行 clearStorage() … 清空设置的所有的数据项目 ..

在这个 setStorage() 里面设置了三条数据 .. name , gender , 还有 job …

浏览器

回到浏览器上 ... 打开这个文档 ... 再打开 Local Storage ... 点击页面上的 设置数据项目 这个按钮 ...

在本地存储这里，你会看到设置的这三条数据 ...

下面，我们可以打开控制台 .. 可以点击 console 选项卡 ... 如果想在当前这个选项卡里打开控制台 ... 可以点击左下角的这个按钮 ... 就是这个大于号，加上三条横线的这个按钮 ...

先看一下在本地存储里存储的项目的数量 ... 可以访问它的 length 属性 ... 现在一共有三条存储的数据 ...

使用 key 加上数据的序号 ... 可以得到指定位置上的数据的名称 ...

这个序号是从 0 开始的 .. 也就是第一条数据的序号是 0 … 第二条数据的序号是 1 …

localStorage.length(0) ... 得到的是第一条数据的名称 ... 也就是 gender ...

再试一下 localStorage.length(1) ... 得到的是第二条数据的名称 ... 是这个 job ...