• 欢迎来到八本那年博客,很高兴可以在对的年纪遇见对的你!
  • 因主题导致QQ登录的小伙伴在评论中显示默认头像,请去个人中心重新上传头像即可。

使用本地存储localStorage实现不再弹出功能

代码笔记 barben 4年前 (2019-06-11) 3225次浏览 0个评论

打个比方

我有个网页,打开之后就弹个公告或者广告出来,反正就是要弹个窗。
你如果不点击”下次不再提醒”之类的东西,那它下次还是会给你弹出来!!!

比方是谁,你为什么要打他?


实现方法:用户点击”不再弹出”后就写入一个值,例如:butanchuang = true,每次页面加载完毕后就判断butanchuang这个值是否为true,为true则不弹出

除了Cookie,还可以使用更简单的localStorage(本地存储)来实现这种功能。

什么是localStorage

在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同。

localStorage的优势

1、localStorage拓展了cookie的4K限制
2、localStorage会可以将第一次请求的数据直接存储到本地,这个相当于一个5M大小的针对于前端页面的数据库,相比于cookie可以节约带宽,但是这个却是只有在高版本的浏览器中才支持的

localStorage的局限

1、浏览器的大小不统一,并且在IE8以上的IE版本才支持localStorage这个属性
2、目前所有的浏览器中都会把localStorage的值类型限定为string类型,这个在对我们日常比较常见的JSON对象类型需要一些转换
3、localStorage在浏览器的隐私模式下面是不可读取的
4、localStorage本质上是对字符串的读取,如果存储内容多的话会消耗内存空间,会导致页面变卡
5、localStorage不能被爬虫抓取到
6、localStorage属于永久性存储

localStorage的写入和修改操作

window.localStorage["name"] = "Bourbon";
window.localStorage.age = 18;
window.localStorage.setItem("sex", "male");

以上代码用三种不同的方式写入了name、age、sex字段,同时也赋予了相对应的值:Bourbon、18、male。

window.localStorage["name"] = "Bobi";

修改某个字段的值可以直接使用新值覆盖。

localStorage的读取

console.log(window.localStorage["name"]);
console.log(window.localStorage.age);
console.log(window.localStorage.getItem("sex"));

你也一样可以使用三种不同的方式分别读取它们的值。


顺便再提下,localStorage只支持string类型的存储,无论你存进来的是什么类型的数据,输出的结果是string。

window.localStorage.num = 666;
console.log(typeof window.localStorage.num); // string
window.localStorage.bool = true;
console.log(typeof window.localStorage.bool); // string

localStorage的删除

window.localStorage.clear();

你可以用clear()方法将全部字段清空。

window.localStorage.removeItem("age");

你还可以用removeItem()方法对指定字段进行删除。


八本那年博客,我们一直都在
如作者未注明既为原创文章,转载请注明本文链接及出处
使用本地存储localStorage实现不再弹出功能 - https://www.barben.cn/code/513.html
喜欢 (10)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体

在八本那年评论需要带上你的昵称和邮箱哦!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址