localStorage 简介
发布日期:2022-02-08 04:20:59
浏览次数:4
分类:技术文章
本文共 2745 字,大约阅读时间需要 9 分钟。
localStorage是全局的公共对象
浏览器关闭了后不丢失,是永久存在的。(runoob.com上里的笔记很清晰)
// localStorage.user="sky";console.log(localStorage.user);
能够看出,存储过localStorage.user后,下次直接打印,也还是存在的。
localStorage、sessionStorage、cookie三者的区别
WebStorage包括 localStorage、sessionStorage ,一般为了方便,总称localStorage。localStorage 和 sessionStorage都是window对象的属性
- cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下。
- 存储大小限制也不同,cookie数据不能超过4k,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。
- 数据有效期不同,sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持;localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。
- 作用域不同,sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;localStorage在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的(为了共享一个cookie,放到顶级域当中;但localStorage放在哪都一样)。 什么是同源,找到一篇阮一峰大佬的文章:。
- Web Storage支持事件通知机制,可以将数据更新的通知发送给监听者。
- Web Storage 的 api 接口使用更方便。
这里有一篇文章解释三者区别的,感觉特别详细:
localStorage的建立&获取&删除
- localStorage的建立,有三种方式:
//以user=“sky”为例localStorage.user="sky";localStorage["user"]="sky";localStorage.setItem("user","sky");
- localStorage的获取,有三种方式:
console.log(localStorage.user);console.log(localStorage["user"]);console.log(localStorage.getItem("user")
- localStorage的删除:
delete localStorage.user;localStorage.removeItem("user");
- 清除所有localStorage存储:
localStorage.clear();
localStorage的一个小练习
localStorage.clear(); //每次清一下这个域的localstorage存储//这个例子说明了一件事,localstorage是长时间存在的,除非你手动删他。就比如说京东购物车,在没登录之前,也能添加购物车,而且添加的元素不会再添加第二次,不过数量上会有变化;等登陆了,把数据一整合,就都放进去了。//这个list是为了不将这些localStorage的默认属性显示在页面里var list=["length","key","getItem","setItem","removeItem","clear"];var ul;localStorage.numAdd=50; //存储一个key为c的本地存储的值为50,下面会实现每次点击页面,就会增加1的功能,这是对自身存储的改变的一个显示看看。init();function init(){ //localStorage 和 sessionStorage都是window对象的属性 window.addEventListener("storage",storageHandler);//在window上添加storage事件 createUI();//每次创建ul标签,把localstorage里的东西用li标签展示出来 document.addEventListener("click",clickHandler);//针对自身网页的存储效果}function clickHandler(e){ localStorage.numAdd=Number(localStorage.numAdd)+1;//就简单改一下看下效果 createUI();}function createUI(){ if(ul){ ul.remove();//将上次通信创建的ul标签删除,避免冗余 ul=null; } ul=document.createElement("ul"); for(let prop in localStorage){ if(list.indexOf(prop)>-1)continue;//如果将要添加的属性已经在localstorage中存在,就不用再次添加了,屏蔽localstorage的默认属性 let li=document.createElement("li"); li.textContent=prop+":"+localStorage[prop]; ul.appendChild(li); } console.log(ul); document.body.appendChild(ul);}function storageHandler(e){ createUI();}
结果:
这是localstorage对象里默认的属性,下面console.log(localStorage),是个Storage对象,点看能看到这些默认属性。 屏蔽掉了localstorage的默认属性,只显示我们要看的。 然后在其他页面里存储一个localstorage属性及属性值。转载地址:https://blog.csdn.net/weixin_43297321/article/details/104290422 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
不错!
[***.144.177.141]2024年04月07日 16时17分20秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
如何最大限度提高.NET的性能
2019-04-27
短信收发类无错版JustinIO.cs
2019-04-27
短信编码类无错版PDUdecoding.cs
2019-04-27
CDMA模块上网设置的过程
2019-04-27
WISMO模块GPRS上网设置的过程
2019-04-27
简要AT命令介绍
2019-04-27
短信收发类无错版SerialStream.cs
2019-04-27
短信猫GSM Modem
2019-04-27
HTTP Response中的Chunked编码
2019-04-27
ASP.NET弹出窗口技术之增加网站流量方法
2019-04-27
IOCP , kqueue , epoll ... 有多重要?
2019-04-27
ASP.NET设计应用程序的七大绝招
2019-04-27
HTTP协议之Chunked解析
2019-04-27
在ASP.NET 2.0中建立站点导航层次
2019-04-27
一个ASP.NET中使用的MessageBox类
2019-04-27
ASP.NET中使用MD5和SHA1算法加密
2019-04-27
ASP.NET实现身份模拟
2019-04-27
asp.net中长内容自动分页的实现
2019-04-27
asp.net/c#字符格式化大总结
2019-04-27