Web存储机制—sessionStorage,localStorage使用方法

Posted 2020-09-25

基本概念

Web Storage 包含两种机制：

• sessionStorage为每一个给定的源维持一个独立的存储区域，该区域在页面会话期间可用（即只要浏览器处于打开状态，包括页面重新加载和恢复）

• localStorage同样的功能，但是在浏览器关闭，然后重新打开后数据仍然存在

这两种机制是通过Window.sessionStorage和Window.localStorage属性使用。更确切的说，在支持的浏览器中Window对象实现了WindowLocalStorage和WindowSessionStorage对象并挂在其localStorage和sessionStorage属性下。调用其中任一对象会创建Storage对象，通过Storage对象，可以设置、获取和移除数据项。对于每个源sessionStorage和localStorage使用不同的Storage对象。

例如，在文档中调用localStorage将会返回一个Storage对象，调用sessionStorage返回一个不同的Storage对象。可以使用相同的方式操作这些对象，但是操作是独立的。

在了解如何使用localStorage和sessionStorage之前，先来一下Storage对象。

Storage对象

Storage对象作为Web Storage API的接口，Storage提供了访问特定域名下的会话存储或本地存储的功能。例如，可以添加、修改或删除存储的数据项。

如果想操作一个域名的会话存储，可以使用Window.sessionStorage；如果想要操作一个域名的本地存储，可以使用Window.localStorage。

Storage对象的属性和方法

Storage对象提供自己的属性和方法：

• Storage.length：返回一个整数，表示存储在Storage对象中的数据项数量。这个是Storage对象的一个属性，而且是一个只读属性。

• Storage.key()：该方法接受一个数值n作为参数，并返回存储中的第n个键名

• Storage.getItem()：该方法接受一个键名作为参数，返回键名对应的值

• Storage.setItem()：该方法接受一个键名和值作为参数，将会把键值对添加到存储中，如果键名存在，则更新其对应的值

• Storage.removeItem()：该方法接受一个键名作为参数，并把该键名从存储中删除

• Storage.clear()：调用该方法会清空存储中的所有键名

简单的示例

写一个简单的示例，页面就三个按钮：Set、Get和Remove。按钮点击时，分别绑定三个函数：setStorage()、getStorage()和removeStorage()：

• setStorage()：做了localStorage和sessionStorage存储，同时存的键名为name，键值为W3cplus.com

• getStorage()：取得存储的name，并打印出来

• removeStorage()：移除setStorage()函数中存储的name

  本地存储基本用法

  前面的示例也演示过了，接下来拿localStorage来做示例：

  localStorage.setItem(‘key‘, ‘value‘); // 设置一个localStorage，名称叫`key` localStorage.getItem(‘key‘); // 获取存储的localStorage，获取的`key`对应的值`value` localStorage.removeItem(‘key‘); // 移除存储的localStorage，删除的名称`key` localStorage.clear(); // 删除所有的localStorage

  为了方便使用，可以对其进行封装。

  设置localStorage

  function setLocalStorage(key, value) {    return localStorage.setItem(key, value); }

  获取localStorage

  function getLocalStorage(key) {     return localStorage.getItem(key); }

  移除localStorage

  function removeLocalStorage(key) {     return localStorage.removeItem(key); }

  注：sessionStorage使用方法和localStorage类似。