localStorage、sessionStorage、webStorage、cookie的异同

相同点：
localStorage、sessionStorage、webStorage、cookie具有存储功能

不同点：
sessionStorage用于本地存储一个会话中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话存储结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非手动删除数据，否则数据是永远不会过期的。
webStorage和cookie概念相似，但其最大的区别就是webStorage是为了更大容量存储设计的。cookie的大小是受限的，并且每次你请求一个新的页面的时候cookie都会被发送过去，这样无形中浪费了宽带，另外cookie还需要指定作用域，不可以跨域调用。
webStorage拥有setItem、getItem、removeItem、clear等方法，不像cookie需要前端开发者自己封装setCookie、getCookie。但是Cookie也是不可或缺的：cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在，而webStorage仅仅是为了在本地“存储”数据而生。
关于localStorage再补充一些须知常识：
1、a.meituan.com 和 b.meituan.com 这两个域能够共享同一个 localStorage 吗？
答：
同一个域名（document.domain）共享同一个 localStorage，因为a.meituan.com 和 b.meituan.com 是两个域名，所以不能共享

2、在 webview 中打开一个页面：i.meituan.com/home.html，点击一个按钮，调用 js 桥打开一个新的 webview：i.meituan.com/list.html，这两个分属不同 webview 的页面能共享同一个 localStorage 吗？
答：
能。相当于同一个浏览器的不同标签页。不同浏览器之间不能共享。

3、如果 localStorage 存满了，再往里存东西，或者要存的东西超过了剩余容量，会发生什么？
答：
存不进去并报错（QuotaExceededError）
// 当存储数据大小超过限制时，会报以下错误：
// YourStorageKey 指报错时存放数据的键值
Uncaught QuotaExceededError: Failed to set the ‘YourStorageKey’ property on ‘Storage’: Setting the value of ‘YourStorageKey’ exceeded the quota.

---

关于用到localStorage的项目案例：
以下是点击文章预览，获取该条文章的id，从而展示该文章的详情内容。