下面我们可以在页面上输出所有设置的 localStorage 数据项目 … 我们要做的就是使用一个 for 循环 … 配合 localStorage 的 length 和 key() … 把找到的数据项目的名称，还有值 … 输出到页面上用来显示 localStorage 数据的容器里面 ..

也就是这个 id 是 storage-data 的 <dl> 标签里面 ..

（#script.js）

先在页面上找到这个容器 …

// 找到显示存储数据内容的容器

document.getElementById("storage-data");

然后给它个名字 … var storageData = … var storageData = document.getElementById("storage-data");

下面再去新建一个函数 … 用来显示存储数据 …

// 显示数据
function displayStorageData() {}

在这个函数里，可以使用 for 循环 …

for(var i = 0; i < localStorage.length; i++) {}

在括号里，先定义一个变量，就是这个小 i … i 一般用来表示 index 索引 … 然后给它一个初始的值是 0 … 每一次循环，都会去去判断一个这个小 i 是不是小于 存储数据项目的数量 …

如果小于的话 .. 这个循环就会结束 …

然后每次循环 .. 这个小 i 都会去加 1 …

下面再去定义一下每次循环要做的事儿 … 用一个 localStorage.key(i); .. 去得到本次循环的数据值的名称 …

可以再命名一下它 … var name =

var name = localStorage.key(i);

然后再用一个 localStorage.getItem(name); 得到本次循环的数据项目的值 … 再给它命名一下 …

var value = localStorage.getItem(name);

下面再把本次循环得到的数据名称还有数据值 … 添加到 storage-data 这个容器里面 …

storageData.innerHTML += name + value;

再去给数据名称还有数据值的周围添加一些标签 ..

storageData.innerHTML += "<dt>" + name + "</dt>" + "<dd>" + value + "</dd>";

注意这种把 html 标签直接添加到程序代码里并不是一个好的方法 … 这样不容易管理 .. 复杂的应用可以考虑使用 mustache 或者 handlebars … 去创建显示的模板 …

在循环开始之前 .. 可以把 storage-data 里的内容设置成空白的 …

storageData.innerHTML = "";

然后再去判断一下 .. 是不是有可用的存储数据 … 如果有的话 .. 才去执行循环 …

if ( localStorage.length ) {}

下面我们可以在一开始 .. 去调用这个 displayStorageData() 函数 ..

然后再设置存储数据的时候 .. 再去调用一下这个函数 … displayStorageData();

清空数据

最后再设置一下清空存储数据以后 … 在页面上显示一个提示内容 …

// 清空数据
function clearStorage() {
localStorage.clear();
storageData.innerHTML = "<div class='alert alert-success'> 清空了 localStorage 数据！ </div>";
}

测试

下面回到浏览器 … 当前还没有设置可以使用的存储数据 ..

点击 设置数据项目 …

这会去执行设置数据的项目的函数 … 还有 显示数据项目的函数 ..

在页面上，会输出所有的存储数据项目 …

点击 清除数据项目 … 会清空所有的数据项目 …

页面上会出现提示 .. 清空了 localStorage 数据！