【HTML5高级第一篇】Web存储 - cookie、localStorage、sessionStorage

在HTML5中，Web存储API提供了一种机制，允许网站在用户浏览器中本地保存数据。这个API包括以下三种存储类型：

1. localStorage：用于长久保存整个网站的数据，即使浏览器关闭后再打开数据也不会消失，除非主动删除数据。
2. sessionStorage：用于临时保存同一窗口（或标签页）的数据，数据在窗口关闭后将消失。
3. cookie：早期用于在服务器端保存用户信息，但现在也可以在客户端使用，但其大小和数量都有限制，且每次请求都会发送到服务器，所以不推荐用于大量数据的存储。

以下是使用这三种存储方式的示例代码：

// 设置localStorage
localStorage.setItem('key', 'value');
 
// 获取localStorage
var value = localStorage.getItem('key');
 
// 删除localStorage
localStorage.removeItem('key');
 
// 设置sessionStorage
sessionStorage.setItem('key', 'value');
 
// 获取sessionStorage
var value = sessionStorage.getItem('key');
 
// 删除sessionStorage
sessionStorage.removeItem('key');
 
// 设置cookie
document.cookie = "name=value; path=/; expires=Thu, 18 Dec 2043 12:00:00 GMT";
 
// 读取cookie
var cookies = document.cookie;

请注意，在使用localStorage和sessionStorage时，如果要存储对象，需要先将对象转换为字符串（例如使用JSON.stringify()），读取时再将字符串转换回对象（使用JSON.parse()）。而设置cookie时，可以直接赋予一个对象，浏览器会自动处理对象与字符串的转换。