JavaScript localStorage 的使用

在 HTML5 问世后，介绍了 Web Storage 的使用 — 可以将网页中的数据存储在用户的浏览器当中 — 也就是说可以在客户端存储数据。使用上的好处在于大部分浏览器都有支持、可以存储数据的容量大多有 5MB 以上、且数据存储和提取相对简单方便。

两种不同的 web storage 对象

1. localStorage：可以跨浏览器分页使用、用户关掉分页或浏览器再打开数据仍不会消失，且数据无有效期限制，数据将永久被保留。
2. sessionStorage：生命周期较短，当用户关掉浏览器或分页时，sessionStorage 中的数据将被清空。

数据存储的格式

• 数据是以类似 JSON 的 Key-value pair 格式存储
• key 和 value 皆需要为字符串

如何使用

• 存储数据：setItem()

localStorage.setItem(key, value)
sessionStorage.setItem(key, value)

• 取出数据：getItem()

localStorage.getItem(key)
sessionStorage.getItem(key)

• 移除数据：removeItem()

localStorage.removeItem(key)
sessionStorage.removeItem(key)

如何找到存储的数据

1. 在 DevTools console 尝试存储数据到 local storage，通过 setItem() 存储数据 — key 值是 firstName；value 是 Mike：
2. 在 DevTools Application 中查看 local storage

localStorage 的缺点

1. local storage 提供约 5MB 的容量空间，若构建的网络应用程序需要暂存大量数据时，容量空间未必充足。
2. 数据存储的格式 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 以上，且可以将数据存储在本地客户端直接使用，简单且方便；然而，数据格式的转换是使用上特别需要注意的地方，若能掌握数据转换的方式，就能更容易上手了。