在 HTML5 问世后，介绍了 Web Storage 的使用 --- 可以将网页中的数据存储在用户的浏览器当中 --- 也就是说可以在客户端存储数据。使用上的好处在于大部分浏览器都有支持、可以存储数据的容量大多有 5MB 以上、且数据存储和提取相对简单方便。
两种不同的 web storage 对象
- localStorage： 可以跨浏览器分页使用、用户关掉分页或浏览器再打开数据仍不会消失，且数据无有效期限制，数据将永久被保留。
- sessionStorage： 生命周期较短，当用户关掉浏览器或分页时，sessionStorage 中的数据将被清空。
数据存储的格式
- 数据是以类似 JSON 的 Key-value pair 格式存储
- key 和 value 皆需要为字符串
如何使用
- 存储数据：setItem()
scss
localStorage.setItem(key, value)
sessionStorage.setItem(key, value)- 取出数据：getItem()
scss
localStorage.getItem(key)
sessionStorage.getItem(key)- 移除数据：removeItem()
scss
localStorage.removeItem(key)
sessionStorage.removeItem(key)如何找到存储的数据
- 在 DevTools console 尝试存储数据到 local storage，通过 setItem() 存储数据 --- key 值是 firstName；value 是 Mike：
- 在 DevTools Application 中查看 local storage
localStorage 的缺点
-
local storage 提供约 5MB 的容量空间，若构建的网络应用程序需要暂存大量数据时，容量空间未必充足。
-
数据存储的格式 key 和 value 都只能接受「字符串 」，若存储的数据非字符串（数组或对象）在存储时会被转成字符串格式，而衍生出其他问题：
我们尝试声明一个 players 的对象，其中包含了三位选手的数据，并通过 setItem() 方法将 players 对象存储到 localStorage 当中：
players 是一个对象，而非字符串，通过 toString() 的转换过程后，会返回 [object Object] ，也就是我们在下图 value 中看到的结果 --- 这不是我们预期的数据结构和内容：
解决方法：将数据转换成 JSON 格式的字符串
要解决以上在数据转换过程中的问题，又或者想要让我们存储的数据不局限于「字符串」的格式，则可以通过 JSON.stringify() 方法，将要存储的数据转换为 JSON 格式的字符串；要取出数据时，再通过 JSON.parse() 方法，将数据转换回原本的格式：
- 使用 setItem() 方法将数据存储至 localStorage 时，我们将 value 通过 JSON.stringify() 方法转换成 JSON 格式的字符串：
- 到 Application Panel 查看存储的数据内容，可以发现这次的格式和预期的相同：
- 当我们要取出数据时，使用 JSON.parse() 方法，将数据转换回原本的格式：
总结
开发 web 应用程序时，若需要将数据存取下来，在往后或离线时使用，一个简单的方式就是通过 localStorage 和 sessionStorage 的应用 --- 不仅容量在大多浏览器都达 5MB 以上，且可以将数据存储在本地客户端直接使用，简单且方便；然而，数据格式的转换是使用上特别需要注意的地方，若能掌握数据转换的方式，就能更容易上手了。