32、localStorage本地储存

前言：讲讲localStorage，这个知识点还是很重要的。 GitHub：https://github.com/Ewall1106/mall

1、什么是localStorage

（1）基本概念

• Storage 接口用于脚本在浏览器保存数据。两个对象部署了这个接口：window.sessionStorage和window.localStorage。
• sessionStorage保存的数据用于浏览器的一次会话（session），当会话结束（通常是窗口关闭），数据被清空；localStorage保存的数据长期存在，下一次访问该网站的时候，网页可以直接读取以前保存的数据。除了保存期限的长短不同，这两个对象的其他方面都一致。

推荐看看阮老师的教程讲解。

（2）存储/获取

• 相对应的简单操作方法就是一个setItem和getItem：

window.localStorage.setItem('key', 'value');
window.localStorage.getItem('key')

• 然后就是我们本章要用的一个储存JSON对象的小方法：

// 存储
let answer = {
    qOne: "我最近的傻事",
    qTwo: "火锅",
    qThree: "hello"
}

answer = JSON.stringify(this.answer);
localStorage.setItem('answer',answer);

// 取出
let answer = localStorage.getItem('answer');
answer = JSON.parse(answer);

2、项目中使用

• 首先我们在地址新增页面将地址保存到本地：

保存

• 然后我们去地址列表页面获取：

获取

• 就可以有这么一个效果：

image.gif

3、小结

其实这种实现方式很不好，这章的主要意义还是在于localStorage这个知识点的运用，下章我们学着使用vuex来进行这个地址状态的管理。