网页储存区 - localStorage & sessionStorage

网页可以储存使用者偏好，可以在关掉网页後重新访问时纪录使用者上次浏览的状态，能做到这些神奇的事是因为浏览器中有一个不为人知（可能只有我不知道）的储存区域（Web Storage），让网页可以使用浏览器提供的API在使用者的电脑上储存资料，如此一来，浏览器就能像人类一样有记忆能力了。

在 HTML5 出现前，应用程序的资料是存放在 cookie 中，但因为 cookie 的储存空间有限（上限约4KB），HTML5 之後有了 Web Storage 物件，可以储存更多的资料量，下图是各家浏览器提供的储存空间

图片来源：维基百科

除了储存空间差异，Web Storage 物件还有以下几个特点：

1. Storage 物件的特性必须是字串
2. 只能用 JavaScript 操作，服务器无法透过 HTTP-Header 操控此物件
3. 具有相同来源的文件才能共用 Web Storage 资料，来源不同的文件就不能读取或覆写彼此的资料

小注解：文件的来源是由它的协定，主机名称及通讯埠所定义。例如说： http://example.com 和 https://example.com 就不是同来源（因为协定不同）

Web Storage分成两大类，分别是：

1. localStorage:
   • 除非手动删除资料否则储存的资料不会过期（关闭视窗後资料不会消失）
   • 相同来源，不同分页的文件可以共用相同的 localStorage 资料
   • 较常使用
2. sessionStorage:
   • 浏览器视窗关闭後所储存的资料会被删除
   • 相同来源，不同分页的文件会各自有独立的 sessionStorage 资料
   • 较少使用

如何操作

储存资料 setItem(key, value)

localStorage.setItem('name', 'ironman'); //存入一笔资料

取得指定key值的资料 getItem(key)

localStorage.getItem('name');  //取得资料

删除指定key值的资料removeItem(key)

localStorage.removeItem('name'); 
localStorage.getItem('name'); // null

清除储存区的所有资料 clear()

//存入两笔资料
localStorage.setItem('name', 'ironman')
localStorage.setItem('age', 15)

// 清除所有资料
localStorage.clear()
localStorage.length // 0

最重要的小事

1. 因为 Storage 物件只储存字串，当存入的值是物件时，要记得先使用 JSON.stringify() 再存入，否则浏览器会使用 toString() 方法转成字串存入，反之，当从 Web Storage 取得储存的资料时，也要记得使用JSON.parse()将字串转回原本的型别。

2. 根据JavaScript大全，因为任何客户端资料储存区都不涉及加密，加上共用该装置的使用者或是存在於该装置上的恶意软件都能够存取这些资料，所以不建议使用客户端储存区来存放密码，金融帐户号码等敏感资讯。

参考资料：

JavaScript大全
MDN
从Cookie到Storage
JAVASCRIPT.INFO