Web Storage：浏览器端数据储存机制

BlackMass 发布于2019-08-26 11:55 / 3105人阅读

摘要：接口用于脚本在浏览器保存数据。保存的数据都以键值对的形式存在。所有的数据都是以文本格式保存。事件接口储存的数据发生变化时，会触发事件，可以指定这个事件的监听函数。字符串，表示发生变动的键名。对象，返回键值对所在的整个对象。

Storage 接口用于脚本在浏览器保存数据。两个对象部署了这个接口：window.sessionStorage和window.localStorage。

sessionStorage保存的数据用于浏览器的一次会话（session），当会话结束（通常是窗口关闭），数据被清空；
localStorage保存的数据长期存在，下一次访问该网站的时候，网页可以直接读取以前保存的数据。

若用户禁用第三方cookie，那么将不允许来自第三方IFrames对Web Storage的访问。（从Firefox 43版本开始实行）
本地存储不同于mozStorage（Mozilla"s XPCOM interfaces to SQLite）或Session store API（an XPCOM storage utility for use by extensions）。

保存的数据都以“键值对”的形式存在。也就是说，每一项数据都有一个键名和对应的值。所有的数据都是以文本格式保存。

每个域名的存储上限视浏览器而定，Chrome 是 2.5MB，Firefox 和 Opera 是 5MB，IE 是 10MB。Firefox 中，a.example.com和b.example.com共享 5MB 的存储空间。与 Cookie 一样，它们也受同域限制。某个网页存入的数据，只有同域下的网页才能读取，如果跨域操作会报错。

属性和方法

Storage 接口只有一个属性。
Storage.length：返回保存的数据项个数。

window.localStorage.setItem("foo", "a");
window.localStorage.setItem("bar", "b");
window.localStorage.setItem("baz", "c");
window.localStorage.length // 3

Storage.setItem()

Storage.setItem()方法用于存入数据。它接受两个参数，第一个是键名，第二个是保存的数据。如果键名已经存在，该方法会更新已有的键值。该方法没有返回值。

window.sessionStorage.setItem("key", "value");
window.localStorage.setItem("key", "value");

Storage.setItem()两个参数都是字符串。如果不是字符串，会自动转成字符串，再存入浏览器。

window.sessionStorage.setItem(3, { foo: 1 });
window.sessionStorage.getItem("3") // "[object Object]"

如果储存空间已满，该方法会抛错。

直接赋值也是可以的：

// 下面三种写法等价
window.localStorage.foo = "123";
window.localStorage["foo"] = "123";
window.localStorage.setItem("foo", "123");

Storage.getItem()

Storage.getItem()方法用于读取数据。它只有一个参数，就是键名。如果键名不存在，该方法返回null。

window.sessionStorage.getItem("key")window.localStorage.getItem("key")

键名应该是一个字符串

Storage.removeItem()

Storage.removeItem()方法用于清除某个键名对应的键值。它接受键名作为参数，如果键名不存在，该方法不会做任何事情。

sessionStorage.removeItem("key");localStorage.removeItem("key");

Storage.clear()

Storage.clear()方法用于清除所有保存的数据。该方法的返回值是undefined。

window.sessionStorage.clear()

Storage.key()

Storage.key()接受一个整数作为参数（从零开始），返回该位置对应的键值。

window.sessionStorage.setItem("key", "value");
window.sessionStorage.key(0) // "key"

//结合使用Storage.length属性和Storage.key()方法，可以遍历所有的键。
for (var i = 0; i < window.localStorage.length; i++) {
  console.log(localStorage.key(i));}

storage 事件

Storage 接口储存的数据发生变化时，会触发 storage 事件，可以指定这个事件的监听函数。

window.addEventListener("storage", onStorageChange);

监听函数接受一个event实例对象作为参数。这个实例对象继承了 StorageEvent 接口，有几个特有的属性，都是只读属性。
StorageEvent.key：字符串，表示发生变动的键名。如果 storage 事件是由clear()方法引起，该属性返回null。
StorageEvent.newValue：字符串，表示新的键值。如果 storage 事件是由clear()方法或删除该键值对引发的，该属性返回null。
Storage.oldValue：字符串，表示旧的键值。如果该键值对是新增的，该属性返回null。
Storage.storageArea：对象，返回键值对所在的整个对象。也说是说，可以从这个属性上面拿到当前域名储存的所有键值对。
Storage.url：字符串，表示原始触发 storage 事件的那个网页的网址。

function onStorageChange(e) {
  console.log(e.key);}
window.addEventListener("storage", onStorageChange);

它不在导致数据变化的当前页面触发，而是在同一个域名的其他窗口触发。也就是说，如果浏览器只打开一个窗口，可能观察不到这个事件。比如同时打开多个窗口，当其中的一个窗口导致储存的数据发生改变时，只有在其他窗口才能观察到监听函数的执行。可以通过这种机制，实现多个窗口之间的通信。

例子

function clickCounter()
{
    if(typeof(Storage)!=="undefined")
    {
        if (localStorage.clickcount)
        {
            localStorage.clickcount=Number(localStorage.clickcount)+1;
        }
        else
        {
            localStorage.clickcount=1;
        }
        document.getElementById("result").innerHTML=" 你已经点击了按钮 " + localStorage.clickcount + " 次 ";
    }
    else
    {
        document.getElementById("result").innerHTML="对不起，您的浏览器不支持 web 存储。";
    }
}

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107824.html

localStorage实现本地储存树形菜单

摘要：因为任务需要添加到树的结构上，所以要记录任务是添加到哪个结点上的，需要为每个树结点添加一个作为标识以便于在结点上添加任务，树状结构中每个结点的按照树的先序遍历将结点的依次储存于数组中。 localStorage实现本地储存树形菜单最近在写一个Todo-list的页面，页面布局和操作都写完后，想要用localStorage实现本地储存。然而对储存数据的方法一无所知，就先去了解了web的...

William_Sang 2019-08-21 10:56 评论0 收藏0
左手Cookie“小甜饼”，右手Web Storage

摘要：源自阮一峰具体什么意思，请看下面的截图就一目了然表示对象的的数量实战网站名网站地址确认网站名查询机制原意是小甜饼，是服务器保存在浏览器的一小段文本信息，属于其中一种互联网存储机制。目录 1. Web Storage 2. Cookie机制 3. 二者的联系与区别 1.Web Storage 1.1 概述 Web Storage是HTML5提供的一种新的浏览器端数据储存机制，它提供两...

Nekron 2019-08-21 11:16 评论0 收藏0
左手Cookie“小甜饼”，右手Web Storage

摘要：源自阮一峰具体什么意思，请看下面的截图就一目了然表示对象的的数量实战网站名网站地址确认网站名查询机制原意是小甜饼，是服务器保存在浏览器的一小段文本信息，属于其中一种互联网存储机制。目录 1. Web Storage 2. Cookie机制 3. 二者的联系与区别 1.Web Storage 1.1 概述 Web Storage是HTML5提供的一种新的浏览器端数据储存机制，它提供两...

宋华 2019-08-05 10:33 评论0 收藏0
深入了解浏览器存储--从cookie到WebStorage、IndexedDB

摘要：优异的性能表现，有一部分原因要归功于浏览器存储技术的提升。是服务端生成，客户端进行维护和存储。当超过时，它将面临被裁切的命运。此外很多浏览器对一个站点的个数也是有限制的。存入读取数据保存的数据，以键值对的形式存在。前言随着移动网络的发展与演化，我们手机上现在除了有原生 App，还能跑WebApp——它即开即用，用完即走。一个优秀的 WebApp 甚至可以拥有和原生 App 媲美的功...

XGBCCC 2019-08-23 16:42 评论0 收藏0
Javascript--离线应用与客户端储存

摘要：在这种情况下，浏览器将继续使用原应用缓存。对象对象有一个属性，属性的值是常量，表示应用缓存的状态。兼容性与其他客户端储存方案相比，同样也有限制，这些限制因浏览器围而异。对象主要用于仅针对会话的小段数据的存储。开发离线Web应用需要几个步骤: 首先确保应用知道设备是否能上网。应用必须能访问一定的资源(图像,Javascript,CSS)，这样才能正常工作。离线检测 naviga...

lmxdawn 2019-08-21 10:50 评论0 收藏0