JS组件封装之监听localStorage的变化

一、JS组件封装之监听localStorage的变化

在日常开发过程中，我们常常会遇到需要频繁使用到的一些功能或插件。为了方便日后查找和使用，我决定将它们封装成一个个组件。目前我已基于vue: ^2.6.14创建了一个新的vue项目，用于测试组件的可用性。我的目标是不仅让组件易于使用，还要确保它们经过充分测试。

今天，我想分享一个我新开发的监听localStorage变化的功能。这个功能的核心在于JavaScript的一个方法：dispatchEvent。它允许我们主动触发DOM事件，通过它可以在设置localStorage时监听其变化并将值保存到变量中，实现响应式更新。具体来说，当调用localStorage的setItem方法时，会触发一个自定义事件，这个事件携带了被设置的键和新值，从而实现监听。

为了实现这一功能，我编写了一个名为dispatchEventStorage的函数。其代码如下：

function dispatchEventStorage(){

const signSetItem= localStorage.setItem;

localStorage.setItem= function(key, val){

let setEvent= new Event('setItemEvent');

window.dispatchEvent(setEvent);

signSetItem.apply(this, arguments);

export default dispatchEventStorage;

在使用这个功能时，可以在Vue组件中这样导入并使用：

通过这种方式，我们可以轻松地监听localStorage的变化并实时更新组件的状态。这是一个简单但实用的功能，希望对你有所帮助。

二、JS代码计算LocalStorage容量示例详解

1、了解localStorage的存储限制对开发者来说至关重要，其标准容量为5M。然而，验证这个容量以及计算剩余空间却不太常见。计算总容量时，我们首先创建一个10KB大小的字符串，不断累加存入localStorage，直到超出最大存储时，记录累积的大小。注意在开始之前需要清空localStorage。代码示例如下：

2、let str='0123456789' let temp=''//先做一个 10KB的字符串 while(str.length!== 10240){ str= str+'0123456789'}//先清空 localStorage.clear() const computedTotal=()=>{ return new Promise((resolve)=>{//不断往 LocalStorage中累积存储 10KB const timer= setInterval(()=>{ try{ localStorage.setItem('temp', temp)} catch{//报错说明超出最大存储 resolve(temp.length/ 1024- 10) clearInterval(timer)//统计完记得清空 localStorage.clear()} temp+= str}, 0)})}(async()=>{ const total= await computedTotal() console.log(`最大容量${total}KB`)})()

3、通过这段代码，我们最终得出最大存储量为5120KB，即5M。接下来计算已使用容量，只需要遍历localStorage中的每个存储项，累加每个值的length属性，得到已使用空间。示例如下：

4、const computedUse=()=>{ let cache= 0 for(let key in localStorage){ if(localStorage.hasOwnProperty(key)){ cache+= localStorage.getItem(key).length}} return(cache/ 1024).toFixed(2)}(async()=>{ const total= await computedTotal() let o='0123456789' for(let i= 0; i< 1000; i++){ o+='0123456789'} localStorage.setItem('o', o) const useCache= computedUse() console.log(`已用${useCache}KB`)})()

5、通过这个方法，我们可以得到已使用容量。最后，剩余可用容量可通过简单计算得出，即总容量减去已使用容量。示例如下：

6、const computedsurplus=(total, use)=>{ return total- use}(async()=>{ const total= await computedTotal() let o='0123456789' for(let i= 0; i< 1000; i++){ o+='0123456789'} localStorage.setItem('o', o) const useCache= computedUse() console.log(`剩余可用容量${computedsurplus(total, useCache)}KB`)})()

7、通过以上步骤，我们可以准确地计算localStorage的容量及其使用情况。更多关于JS计算LocalStorage容量的资料，欢迎访问自由互联的相关文章。

三、js当中,window.localstorage和localstorage两种调用写法有

1、在JavaScript中，`window.localStorage`和`localStorage`两种调用方式在功能上没有区别。你可以选择使用`localStorage`作为局部变量名，这样可以遮蔽全局的`localStorage`对象。同样地，你也可以创建一个名为`window`的局部变量，从而间接地遮蔽全局的`window`对象。甚至`globalThis`也可以被局部变量遮蔽，这是`globalThis`设计的一个特性。

2、然而，尽管遮蔽问题不会影响这两种调用方式的基本功能，但在实际的使用中，它们可能会遇到细微的差异。例如，`eval`函数在使用方式上就存在区别。在较旧的IE浏览器版本中，`setTimeout`和`window.setTimeout`之间存在一些怪异的bug。当你覆盖全局的`setTimeout`函数时，调用`setTimeout`函数依然会使用原始版本的函数。

3、综上所述，`window.localStorage`和`localStorage`在大部分情况下可以互换使用，但在某些特定的环境和函数中，它们可能会展现不同的行为。因此，了解这些细微差别对于编写兼容不同浏览器环境的代码至关重要。