# HTML5 的 web storage
HTML5 中的 web storage 包含两种存储方式:localStorage 和 sessionStorage,这两种方式存储的数据不会自动发给服务器,仅仅是本地保存。
localStorage 是持久化的本地保存,只要你没有主动删掉,就会『一直存在』。就像一些缓存,都把 APP 删了还有。
说明
它不像 Cookie 可以设置超时时间,能到期后自动删除。
sessionStorage 是会话级别的本地保存,比如一个页面关闭的时候该页面设置的 sessionStorage 数据会自动消失,在不同浏览器窗口不会共享的,即使是同一个浏览器的同一个页面。
注意
同一个窗口中的不同的 tab 算不同会话。
# 1. Window 的 sessionStorage 属性
注意,在存储数据的时候,各种类型的数据都会被转换成字符串后再存入。因此,在读取数据的时候,你的可能需要做反向的转换操作。
// 保存数据语法:
sessionStorage.setItem("key", "value");
// 读取数据
var lastname = sessionStorage.getItem("key");
// 删除指定键的数据
sessionStorage.removeItem("key");
// 删除所有数据
sessionStorage.clear();
# 2. Window 的 localStorage 属性
// 保存数据语法
localStorage.setItem("key", "value");
// 读取数据语法
var lastname = localStorage.getItem("key");
// 删除数据语法
localStorage.removeItem("key");