首先来说一下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上