在这个视频里我们一起来看一下怎么样在应用去设置 Local Storage ，

这里我们在控制台会上去测试一下 Local Storage ... 我们可以先去创建一个空白的网页 ... 然后把它放在 Web 服务器里面，你可以把它放在本地搭建的服务器环境里。 然后再用浏览器打开这个空白的网页 ...

设置 Local Storage

打开控制台 ... 在这里我们可以直接输入代码 …

设置 Local Storage 的数据可以使用 key-value Pair 的形式 .. 也就是设置一个数据的代号或者叫名称 … 然后再去设置对应的这个数据的值 … 这个名称和值是成对出现的 …

这里用到的方法是 setItem() ...

输入 localStorage 这个对象 .... 再去调用它的 setItem 方法 … 这个方法有两个参数 … 第一个参数是数据的名称 … 第二个参数是数据的值 ...

localStorage.setItem("name", "王皓");

这样我们就设置了一条数据 ... 数据的 key，也就是数据的名字叫做 name ，跟它对应的值是 王皓 … 这个数据项目会存储在客户端的浏览器上 …

查看

想要查看这些在本地存储的数据项目 … 也可以使用浏览器的这个开发者工具 … 打开 Resources 选项卡 …

然后打开 Local Storage ..

，你会看到一个 xx 它就是存储这些数据的区域 …. 打开它 ..

在这里，会显示出存储的数据 … key 是数据的名称 … 这里你可以看到我们刚才设置的 name 这个 key …

对应的值是 王皓 …

继续设置

回到 Console …

如果使用 setItem 重新去设置 name 这个 key 的值 … 如果值跟之前设置的不一样 … 会覆盖掉之前的设置 …

按一下向上箭头 .. 可以调出之前在控制台上输入的东西 … 修改一下 name 这个 key 的值 … 改成 小雪 .. 回车 …

再打开 Resources …. 你会发现 .. name 这个 key 的值现在就会变成 小雪了 …