Html5本地存储

Html5本地存储

HTML5 为我们提供了两种 API，分别是 localStorage 与 sessionStorage。二者作为 HTML5 新增的特性，它们的使用方法类似，都可以用来存储客户端临时信息，并且二者存储的数据格式均为 key/value 对的数据。区别在与生命周期，localStorage 除非手动清除，否则会永久保存在客户端，而 sessionStorage 仅仅在当前网页会话下有效，在关闭页面或者浏览器就会被清除。

举个栗子

localStorage

保存数据到本地存储，然后获取本地存储数据

localStorage.setItem("name", "工藤新一");
localStorage.UserId = 123456;
let name = localStorage.getItem("name");
console.log(name);

根据指定名称从本地存储中移除

localStorage.removeItem("name")

清除本地存储中所有数据

localStorage.clear()

完整代码为：

localStorage.setItem("name", "工藤新一");
localStorage.UserId = 123456;
let name = localStorage.getItem("name");
console.log(name);
localStorage.removeItem("name");
localStorage.clear();

sessionStorage

sessionStorage.setItem("name", "工藤新一")
sessionStorage.UserId = 123456
let name = sessionStorage.getItem("name")
console.log(name)

使用 getItem() 方法，根据名称获取 value 值

使用 removeItem() 方法根据指定名称删除数据；

sessionStorage.removeItem("name")

使用 Clear() 方法清空所有数据

sessionStorage.clear()

两者区别💡

localStorage 的生命周期是永久的，除非用户清除 localStorage 信息，否则这些信息将永远存在。

sessionStorage 的生命周期是临时的，一旦当前窗口或标签页被关闭了，那么通过它存储的数据也就被清空了。