WebStorage本地存储

WebStorage是什么？

Web应用的发展，使得客户端存储使用得也越来越多，而实现客户端存储的方式则是多种多样。最简单而且兼容性最佳的方案是Cookie，但是作为真正的客户端存储，Cookie则存在很多致命伤。因此，HTML5 提供了WebStorage，它比使用 Cookie 更直观，存储大小比Cookie大得多，可以达到5M或更大。

WebStorage 由两部分组成 会话存储(sessionStorage) 和 本地存储(localStorage)

sessionStorage 会话存储

  1. sessionStorage 里的数据在页面关闭时会被清除。
  2. 刷新页面仍会保持原来所存储的数据。
  3. 打开多个相同的 URL 的页面，会创建各自的 sessionStorage存储。

localStorage 本地存储

localStorage 存储的数据永久保存在客户端本地，不会因为页面关闭而被清除。

存储在 sessionStorage 或 localStorage 中的数据特定于页面协议。也就 是说 http://example.com 与 https://example.com 存储的数据相互独立，被存储的键值对是以 UTF-16 字符串的格式所存储，其使用两个字节来表示一个字符。

WebStorage API

Storage类 提供了访问特定域名下的会话存储或本地存储的功能，例如，可以添加、修改或删除存储的数据项。
浏览器提供的 localStorage 和 sessionStorage 都是 Storage 的实例对象，他们的属性和方法都是相同的。

实例属性

length属性返回一个整数，表示存储在 Storage 对象里的数据项数量。

1
2
3
4
sessionStorage.clear();
sessionStorage.setItem("test","哈哈哈哈");
sessionStorage.setItem("demo","测试");
console.log(sessionStorage.length); // 2

实例方法

setItem

setItem方法用于保存数据，接受一个键名和值作为参数，将会把键名添加到给定的 Storage 对象中，如果键名已存在，则更新其对应的值。

1
2
sessionStorage.setItem("name","今晚不熬夜");
localStorage.setItem("name","明天不熬夜");

getItem

getItem方法用于获取数据，接受一个键名作为参数，并返回对应键名的值。如果没有返回null。

1
2
3
4
let name01 = sessionStorage.getItem("name");
let name02 = localStorage.getItem("name");
console.log(name01);    //今晚不熬夜
console.log(name02);    //明天不熬夜

removeItem

removeItem方法用于删除数据，接受一个键名作为参数，删除该键名和对应的值。如果没有不执行任何操作。

1
2
sessionStorage.removeItem("name");
localStorage.removeItem("name");

clear

clear方法用于清空数据，调用它可以清空存储的所有的键值。

1
2
sessionStorage.clear();
localStorage.clear();

key

key方法接受一个数值作为参数，返回存储对象第 n 个数据项的键名。（没有则返回null）

1
2
3
sessionStorage.setItem("name","今晚不熬夜");
sessionStorage.setItem("title","哈哈哈哈");
console.log(sessionStorage.key(1)); //title