localstorage引发的思考

最新推荐文章于 2023-02-28 10:27:26 发布

渣渣前端

最新推荐文章于 2023-02-28 10:27:26 发布

阅读量379

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/dtbk123/article/details/105606888

版权

前端专栏收录该内容

74 篇文章 0 订阅

订阅专栏

首先来说一下localStorage是本地存储，容量大小为5m，缓存期限是无限久，即使浏览器关闭它也还存在，除非手动删除。下面用它来模拟cookie的功能，让它也具有过期时间

  function save(id,data){
        var date=new Date()
        var time=24*1000*60*60;
        localStorage.setItem(id,data)
        requestAnimationFrame(local)
        function local(){
            var date1=new Date();
                if(date1-date>time){localStorage.removeItem(id)}
                requestAnimationFrame(local)
            }
    }

如果存储的数据超过localstorage的大小，它不会覆盖原来的数据，也不会再增加数据，浏览器会报错QUOTA_EXCEEDED_ERR。

如何跨域存储localstorage呢？可以利用iframe标签及h5的webworker

//http://localhost:8081/#/
window.parent.postMessage({name:'xx'}, '*')

//http://localhost:5500
<body>
 <iframe src="http://localhost:8081/#/"></iframe>
</body>
<script>
  window.addEventListener('message',data=>{console.log(data.data)//{name:'xx'}
    localStorage.setItem('name',data.data.name)
})
</script>

子页面可以向父页面发送数据，然后存储在localstorage上