好资源导航 » 文章资讯 » Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现

Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现

2023-07-17 05:45:03 162

今天我们使用本地缓存localStorage来实现页面刷新了，验证码倒计时还是和刷新时一样，而不是清零，其次我们可以使用localStorage去实现用户信息缓存，记住密码等等关于缓存的功能，在这里就简单演示一下验证码功能。

一、功能实现

话不多说，直接上代码

二、知识拓展

1.对比cookies，sessionStorage和localStorage三大缓存的主要区别

1)存储大小

cookie数据大小不能超过4k。
sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

2)有效时间

localStorage:存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
sessionStorage:数据在当前浏览器窗口关闭后自动删除。
cookie:设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭，

3)数据与服务器之间的交互方式

cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端。
sessionStorage仅在本地保存，只能在同一标签下共享。
localStorage仅在本地保存，同一浏览器，标签页全部共享。

4)适合场景使用

localStorage:适合用于用户离开不清除的数据，如记住密码。
sessionStorage:适合用于做一些用户离开时及清除的数据，如用户信息。
cookie:适合用于和服务器交互的数据，如用户发起请求的唯一凭证。

当然只是说谁更适合，存在即合理，别和我杠。

2.localStorage写法

localStorage.getItem("code")//或localStorage.code或localStorage["code"]，获取code
localStorage.setItem("code","A")//或localStorage.code="A"或localStorage["code"]="A"，存储code
localStorage.removeItem("code")//存储的持久数据不清除是不会丢失的，清除code
localStorage.clear();//清除本地全部localStorage缓存

总结

到此这篇关于Vue利用localStorage本地缓存使页面刷新验证码不清零的文章就介绍到这了,更多相关Vue页面刷新验证码不清零内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现

热门推荐

随机推荐