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