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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Web存储机制—sessionStorage,localStorage使用方法相关的知识,希望对你有一定的参考价值。

基本概念

Web Storage 包含两种机制:

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

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

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

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

在了解如何使用localStoragesessionStorage之前,先来一下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():调用该方法会清空存储中的所有键名

简单的示例

写一个简单的示例,页面就三个按钮:SetGetRemove。按钮点击时,分别绑定三个函数:setStorage()getStorage()removeStorage()

  • setStorage():做了localStoragesessionStorage存储,同时存的键名为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类似。


以上是关于Web存储机制—sessionStorage,localStorage使用方法的主要内容,如果未能解决你的问题,请参考以下文章

web存储机制localStorage和sessionStorage

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

localStorage 与 sessionStorage

Web存储—sessionStorage存储

Web Storage

web本地存储 sessionStorage 和 localStorage