Tech Neo技巧沙龙 | 11月25号，九州云/ZStack与您一路商量云时代收集界线治理实践

 媒介

我们都知道localStorage与sessionStorage是用于本地存储的，那么我们该若何获取本地存储的大年夜小呢？

若何监听storage事宜，并作出后续处理呢？

今天这篇我们就一路来看看吧，文中的算法代码，已经放到了github上了，感兴趣的同窗可以自取。

https://github.com/zhouxiongking/article-pages/tree/master/articles/H5Storage

获取本地最大年夜存储上限

localStorage与sessionStorage是一样的，我们就以localStorage为例进行代码编写。

重要思惟：在localStorage中存储的信息都是{key: value}的字符串情势，所以只要我们经由过程setItem办法一向的加存储值的长度，直到抛出异常为止，我们就可以在catch中获取到本地存储的最大年夜值。

经由过程以上的思惟，我们可以获得以下的代码。

自定义storage事宜

我们可以直接将上述代码复制到控制台的console栏下运行，就可以获得浏览器的本地最大年夜存储的大年夜小。

以下是在Chrome浏览器下的运行结不雅，大年夜中可以看出Chrome浏览器的本地最大年夜存储大年夜小为5.12M。

Chrome浏览器下

以下是在Safari浏览器下的运行结不雅，大年夜中可以看出Safari浏览器的本地存储大年夜小为2.56M。

Safari浏览器下

大年夜实际的运行结不雅可以看出不合的浏览器的本地存储localStorage大年夜小是不合的。

如不雅想看看其他的浏览器的localStorage最大年夜值，可以直接运行上述代码。

获取localStorage的残剩容量

有的时刻我们在应用localStorage存放数据时，须要知道当前还残剩若干容量，该怎么办呢？

重要思惟：我们同样用到localStorage中存放值是{key: value}字符串的道理。

• 先经由过程上一节中的办法获取localStorage存储的最大年夜值

• 在for...in轮回中，经由过程getItem办法获取所有已经应用的存储，然后累加起来

• 最大年夜值减去已经应用的存储空间，即可获取残剩的容量

获取残剩容量

经由过程上述的代码我们就可以获取localStorage的残剩容岑岭。

当localStorage或者sessionStorage中存储的值产生变更时，就会触发storage事宜。

类似于click事宜一样，localStorage与sessionStorage也可以触发storage事宜，其定义的方法也是一样，可以经由过程addEventListener来实现。

然则须要留意的是：在默认情况下storage事宜的触发是产生在同源下的不合页面中的。

膳绫擎这句话的意思是，如不雅我们在一个页面修改localStorage中存储的值，然后在同一个页面设置storage事宜，如许是无效的。

当然我们可以修改默认的storage事宜，改为自定义的方法，这个放鄙人节来讲。

为了印证上述的不雅点，我们应用两个页面，在页面A中经由过程localStorage给变量name设置初始值kingx，并且设置监听storage事宜，然后在页面B中改变变量name的值为kingx2，最后来看看是否触发了页面A的storage事宜。

页面A的代码如下。

页面A

页面B的代码如下。

页面B

获取本地最大年夜存储的办法

当我们运行了页面A和页面B后，然后在页面B点击change按钮，修改name的值，然后回到页面A去查看console控制台，会发明有以下的结不雅。

获得的代码如下。

测试结不雅

　　推荐阅读

　　未来工厂的想象：无人化？个性化？

Tech Neo技巧沙龙 | 11月25号，九州云/ZStack与您一路商量云时代收集界线治理实践 实现主动化，几乎是业内一致认同的将来工厂的雏形。“我们对将来工厂的期望并不是多么的高大>>>详细阅读

本文标题：HTML5新特性之localStorage的使用技巧，不看看你可能真的不知道

地址：http://www.17bianji.com/lsqh/39128.html

 1/2    1