00:00
好嘞,各位,咱们呢继续往下说,这小节呢,讲点轻松的东西啊,叫做浏览器的本地存储,我先声明一下啊,这个东西不是view团队所打造的,原本GS里边就有这功能,所以说呢,这一小节的代码我没有必要啊,非得写在这个点view文件里啊,然后还得借助脚手架帮我翻译,没那个必要,我就直接在这个点HTML文件里面写就可以了啊,写点脚本就把它讲完了,这个东西超级简单,所以说接下来我不会破坏这个src里的代码,不动它啊,这个07SRC呢,只不过是从他身上啊复制出来的一份,目前他俩是一模一样了,各位OK啊,那既然都不用脚手架了,所以说我把脚手架停掉了啊,一会儿就直接写HTML文件,右键直接运行就可以了,所以说各位来吧,直接创建文件夹,零八来一个下划线,叫做浏览器本地存储。然后我要讲的东西呢,有两。
01:00
各各位啊,第一个东西的名字叫做local啊,这个词大家都会拼,对吧?然后后边还有个词啊,还有个词叫storage age storage,哎,Storage age啥意思呀,各位,哎,有道查一下呗,本身它就有什么存储啊,保管的意思是不好,这是第一个我要讲的东西,还有一个各位叫做session storage storage age,这个词不变,前边的词换掉session storage,如果听视频的各位说,老师,哎呀,这俩东西我太熟悉了,我知道他身上不就那四个API吗?好,各位,这小节视频你直接跳过去,如果说你听到这两个东西,诶,跟听新知识似的,诶,那你听一下这小节,好吧,来给它关掉。首先啊,我们聊聊什么叫浏览器的本地存储啊,给大家演示一下你就明白了。我打开一个网站啊,咱们拿哪个网站举例子呢?咱们拿这个网站叫做唯品会,哎,大家可能用过吧。
02:00
打开。大家注意啊,现在我没有登录,我没有登录,我要登录的话,这块应该是我的用户名对不对?哎,接下来呢,我搜索一个商品,各位你看搜索历史里边是不是空的呀,哎,就证明我没有搜索过,好现在我开始搜索一下,搜索一个皮鞋,好搜索你得真正搜啊,好了,搜完了吧,各位,那你看着我把浏览器啊,整个都关掉,同学你分析一下这场景,我没有登录我的账号对不对,哎,刚才呢,我还搜索东西了对不对,好,重新打开这个唯品会来走着啊,唯品会走,然后呢,打开它,然后呢,你再点那个搜索框,然后你注意观察啊各位来走着,你看搜索历史里面出现了这个皮鞋,对吧?那这皮鞋存在哪儿了呢?你别跟我说说老师存在你那个账号里了,在人家数据库里的,我连登录我都没有登录,对吗?各位,哎,那我跟你说这个皮鞋呢,其实它就是借助了浏览器的本地存储。
03:02
我存到了你的硬盘上,哎,那通过浏览器怎么去看这个东西呢?说老师你不会这样带我去看吧,C盘哪个文件夹下的哪个,诶同学不用那么麻烦,不用那么看,借助浏览器的开发者工具就可以查看,来走着这回啊,各位,咱们就不看这个控制台了,你别操内心啊,说老师他咋这么多log呢,那是人家网站的事儿,咱不管啊,来这儿如果你嫌烦就清空掉,同学换一个选项卡啊,不看network,不看O,看谁呢?这有一个叫做application,什么意思呢?叫应用打开,那这里边有一个分类,各位看好了,就叫做local store age,好打开它,那你能看到两个网站,这是为什么呢?说一下啊,各位是这两个网站呀,都是属于唯品会他家的域名,所以说在这儿呢,就给你放在一块儿了,OK,也就是说这块绝对不会出现什么百度淘宝知道,不就是说目前你是在唯品会这个网站里面打开的控制台,那展示的全是唯品会。
04:02
他家网站所存的东西,那如果各位比如说啊,你打开这个是吧,打开那个东哥他家那网站是吧,哎,京东那这个时候呢,你再调到这个application,同学你看那肯定是京东往里存的东西,OK,哎,好了,给这个关掉,咱就看唯品会的啊同学打开这个在这里存着呢啊你点一下你看同学你看那皮鞋是不是在这儿呢,而且你看它存储数据的这个形式啊,KY6就是TY6这种间值,对啊,那同学你看着我把这皮鞋呀,给它复制一份,好在这儿呢,给他来一个逗号啊,不叫皮鞋了,换一个叫什么呢?叫电脑同学我这是偷偷的在改数据是不是,哎说老师下边这个下边的你不用管啊,那是实现别的功能的,而且各位你看它那个key,你看看search history data啥意思,搜索的历史数据,对不?各位说老师,那这怎么没变呢,你往旁边点一下啊,然后呢,你再回来走,你看是不是出现了,哎,那如果把。
05:02
把它删掉呢,同学点这个叉就是删掉啊,你看delete selected就是选择的被删除走是不是没了,那这时候你往旁边一点,你再回来,你看搜索的历史是不是就没了呀,这就是浏览器本地存储的一个应用,对吧?哎,就是往你本地缓存点东西,哎就这意思,那唯品会能放,我们能不能放呢?诶也是可以的,来吧各位浏览器关掉,然后打开第一个local storage age里边我得写点东西走初始化一些固定的结构,把这名字呀给它粘过来,Local storage age,然后同学我写几个按钮啊,分别是对这个local storage age里的数据呢进行增删改查啊先写一个简单的吧,写一个按钮叫做点我保存一个数据,我就不说往哪保存了,肯定是往local store age里面,对不对,或者说在这来我给你写一个HR写到这儿告诉你啊,我在写这个里边相关的代码,来给他一个那个点击事件吧。
06:02
同学啊,我现在可不是写view,我在写最原始的atml啊,是不是有这么一种绑定这个点击事件的方式啊,比如说呢,给他起一个名字叫做save保存吗?Data啊,保存数据加不加小括号啊,原生的HTML里面当然得加了呀,各位对不对?哎,好了,保存,然后呢,写一段脚本,然后直接写就行了啊function然后呢,叫做save data好,里边你编写一段代码就能把你的数据存到那个local store age当中,诶,来咱试试啊各位右键打开,嗯。刷新一下啊,然后呢,打开这个application啊在这看,哎呀说老师这里边本身就有东西啊,诶,那是我之前存的,哎,现在呢,把它清掉这个clear粒啊,啥意思,清空所有呗,哎,清掉好了,各位,现在呢,你别管之前我存啥了,现在咱往里边存点来吧,各位怎么写呀,这段代码很简单,各位在window身上,哎,有一个这个人叫做local storage age,那既然是window身上的各位,我是不是可以直接写呀?哎,Local storage点哎就开始往里放东西吧,那这里边有什么呢?各位有一个API啊,叫做set item,什么意思呢?就是设置一个值,OK,走同学,它的形式是键值,对,你比如说我想保存一个message啊,就直接写,那它的值是多少呢?比如说是hello,一个感叹号,OK,你就这么存数据就能进去,非常简单。各位回来看效果啊,刷新一波,嗯,来到这儿开始存走,你进来了吧,哎,就这么简单,各位K。
07:36
Y6,那值得你注意的呢,是这个K啊和这个Y6都得是字符串啊,说老师,那我想试试,如果我不写字符串呢,那来你试试吧,走,你在这儿写一个MESSAGEC2,然后呢,同学你看着啊,我直接写,写什么呢?666同学,我写的可是一个数字,不是字符串,对不对?哎,那他会怎么处理呢?来我们看一下,回到这儿说老师你是不是还得再点一下啊,那肯定是啊,如果我再点一下,各位我问你啊,没点呢?没点呢,如果我再点一下的话,那你说里边是不是已经有这个MSG是hello了,那他会怎么做呢?那你看一下呗,比如说在这儿改成三个感叹号,你猜也能猜得到,它会替换的,对吧?各位走你看变成这样子了,而且同学你注意看啊,他把你的666这个number类型给你转换成了string类型是不?如果要是数值类型,各位它得是蓝色的666是不现在是黑色的,那就代表都是字符串,好,那现在就有一个问题。
08:36
写到各位,如果说呢,我有一个人let一个P人呢,有这个名字随便写一个,比如说叫做张三啊张三我这儿呢,好像多写了一个空格吧,嗯,然后呢,再给他写一个这个A吧,比如说让他的年龄呢,是是八岁啊,我要把这张三存进去,那你说这是不是得换一个呀?啊同学跟你那个对象一样,如果你在下边再写一个MSG2,那把上边16行的就覆盖掉了,是吧?哎,别叫这MSG了,叫什么呢?叫person OK,然后把谁存进去呢?这P你瞧一下效果啊各位这就有意思了,哎,刷新一波啊,往里存走你。
09:14
呀,同学这什么情况啊啊,你看到这儿了,应该能有所反馈,各位,一个对象掉了to string方法是不是就长这模样?哎,也就是说如果在这你输出一下这个P点凸,然后呢,String,那你自己看吧,各位啊,回到这控制台刷新是不是这模样,其实对象里面是什么已经不重要了,纵使你是一个空对象,我问你各位在这儿刷新是不是也这模样啊?那你觉得你这么存对吗?好像不太对吧?各位,你是存进去了,但这玩意儿怎么办?废了以后在读出来的时候也不知道里边的具体内容了,那你说这怎么办呀?各位来回来啊,说老师为什么调to string呢?是这样的,只要你第二个参数那个value你给的不是string类型,他一定会帮你调to string的啊对象我们千万别让他给咱调那个to string调完了之后咱就不认识了,那怎么办呢?各位别忘了这个人呢,Jason点身上是不是有个strange同学jason.strangeify是不是能把一个对象变成一个字符串的形式,并且能体现出来里边的内容,不像刚才那个object那种形式,对吧?各位好,这回呢,你再瞧,来刷新一波啊,然后往里存走,你这回就对了是不?各位,而且你看啊,当你鼠标点在这些东西上的时候,这块代表的是什么呢?就是字符串,然后你点这儿的同学,其实它本质啊,你听我说啊,也是字符串,不信你看这儿你双击。
10:41
你看本质它就是字符串,但是啊,它能猜到,诶你这东西啊,好像能解析成一个对象,它就帮你在这儿给你呈现一个对象了,是不?各位OK,那么保存数据咱是不是学会了呀?哎,就这么简单,那你说除了保存还有什么呢?点我保存一个,那存了之后你是不是得读取啊,啊那读取完了,用完了之后是不是得删除啊,哎,好了,那这呢叫读取,那这也换一下啊,不叫save data read是吧,读取,那这呢换一个叫做什么呢?删除,哎,删除那怎么写呢,这词呗,Delete啊那接下来就是这个走走是不是三分名字改read,这也得改delete,好,咱们把这呢删掉,先说说怎么读读啊也特别简单,各位还是调local storageage,点刚才设置一个值叫set item,那你说读呢,当然叫get item对吧,那读你说明白你读谁呗。
11:41
里边有三个东西呢,MSGMSG2还有person,你读谁呢?说老师我想读MSG2,那行啊,就这么写,然后呢,他就会给你一个返回值,那我们想输出这个返回值是不是可以这么写呀,来回头瞧牙各位刷新一波回到控制台了,这回就得哎读嗯,是不是666,注意了,是黑色的666是不是,哎,是字符串,舒老师,那我都想读出来,行啊,走走这块是MSG,那这儿呢,12PERSON,好,回头看效果啊,刷新一波走都读出来了吧,但是同学这两个吧,还行,那你说这个不是我们想要的样子,那你说得怎么办呀,那没办法了,就得辛苦你一下了,各位,那怎么着,是不是得把这个东西jason.pass一下啊,但是想写的呢,明白一点,那我就这么写啊,这来一个result,就是读取出来的结果,随后我输出呢,是jason.pass哎,解析一下这个result啊,回头看效果读取,这回对了吧。
12:41
是吧啊来,那还得删除啊各位,嗯,那写吧,Delete,那删除吧,同学就更简单了啊,还是local storageage点就这个叫做remove at,就是移除一个item,注意啊,同学千万别写成delete item没有这个啊,是remove移除,移除谁呢?先说呗,啊想移除谁就移除谁啊,我想移除这个MSG2可以呀,各位来瞧效果啊,回到这刷新一波,找到application,现在这三个都在里呢,是吧,哎,删除一个走是不是没了,哎,这是删除,其实呢,各位,这里边还有一个API不叫删除啊,叫清空,你说啥叫清空啊,就是不说删哪个全都删掉啊,那所以说这块呢,应该叫做这个啊,Delete out吧,加一个奥德了啊delete out,好,复制一份,把这个再来一份,名字给他改一下,那同学来再猜一下呗,让你去设计这个API,那你说叫什么名字呢?可能有同学猜到,哎,老师是不是叫做瑞木奥啊?
13:41
诶,这回它就不叫木了,叫这词儿叫做clear clear哎清空好了,各位看一下效果啊,刷新一波啊清空啊走是不是都没了啊,点这个保存,点这个读取,那你一看读取出来了,回来那我删除一个MSG2就没了,那清空就都没了,OK同学,这就是对整个这里边的数据的操作,然后知得你注意的是什么呢?各位,就是当你读取东西的时候啊,如果你读取了这么一个东西,你瞧着我在这写吧,我读取这个MSG3,我有吗?我里边放这东西了吗?没有放,那读取出来的是什么呢?
14:20
是空字符串还是安fun呢?哎,看一下啊,当你读东西它没有的时候,各位瞧着啊,读是no对吧?各位and是怎么出现这么多的nu呢?那看一下呗,来到这检查一下MSG这都有啊同学你别忘了呀,刚才你是不是点了清空啊?哎,来存一下各位让这三个都有回来清空,我这回再读同学能读的都读出来了,读不出来的那就是什么呢?No,然后还值得你注意的一个事儿就是如果在这儿你读取的是PERSON4同学。没有这人吧,那你读出来的result是no,那jason.pass一个none的结果是,哎,那你看一下吧,啊,刷新一波,保存一份读取各位JA森点pass none的结果还是none,哎,这块你要注意,有的时候写代码的时候可能觉得,哎呀读不出来就是安de了啊,那Jason点那个pass unde find得报错呀,不是的,它是no OK,那这就是local store age,我就讲完了,Local store age最大的特点各位就是你把浏览器关闭掉,哎,它也不会消失,你比如说各位啊,现在这里边有没有东西呢?看一眼都有吧,嗯,来关了。
15:36
关了吧,浏览器没了,这个时候呢,你打开走不点任何的按钮,刷新一下,还是切到这个application,同学,你看数据是不是还在,其实细心的同学都发现了,我在刚开始给你讲这儿的时候,你发没发现这里边就残留着我之前讲课的痕迹,是不是里边就有那个什么MSG,什么MSG2,对不?各位,哎,好,他呢,还有一个弟弟,他的弟弟叫什么名字呢?叫session age,所有的这些API跟都一模一样,也就是说session storage也有,Item也有,Get item也有,Remove item也有啊,那我们接下来就别客气了,全选复制来到这个里边,粘贴名字改一下,别叫local,叫session session有什么意思呀?各位,其实啊,它本身就有绘画的意思,对吧?各位,哎,同学啊,知识别学杂了,我现在给你讲的是前端课,我在给你讲的是前端里边的。
16:36
的浏览器的本地存储,你别跟我扯到那儿去说老师是不是服务器里的session绘画,诶同学跟那没关系啊,但是session这词儿翻译过来都有绘画的意思,绘画是啥意思?你就比如说你跟我打个招呼啊,说老师早饭吃的吗?我说吃的啊,喝了碗小米粥,同学,这就是一次绘画啊,那一次绘画的结束就意味着咱俩对话完毕了,那对于浏览器来说,绘画完毕了就是指哎,浏览器关闭了啊,所以说这个绘画store age它有什么特点呢?各位我先直接告诉你,就是浏览器一关它就没了啊,那接下来啊,你得做这么一件事啊,全局去搜索这个local storage age,然后把所有的local storage age全都替换成这个词,叫session storage age,你就大胆的替换吧,他俩身上的API是一样的,哎,这块替换全部OK,换完了吧,来右键看一下效果啊各位打开这回呢,我们就不再关注那个local storage了,我们关注的是这个session storage。
17:36
诶诶说老师里边有东西,你看你看有同学你听我说这个东西啊,有可能是你的脚手架给你放进去的,或者是你的那个atml里边这个插件,就这个右键,这不这个东西吗?什么open with live server,哎,就是这些东西可能是很多人都要往里边放东西,明白不?各位你别那么霸道,说人家不能放,只有你能放,除了程序员别的东西也能往里放插件啥的是不是?各位还有就是什么呢?你在这儿安装的各种对吧?可是我们这些插件可能也往里边放东西,OK啊,你这你别那么霸道啊,说老师那我看着烦烦就给它清掉是吧?好了,来保存走数据是不是来了,来读取走是不是也正常啊?嗯,舒老师,那这俩怎么没有呢?那你看一下呗,来你读取的时候来走,你这不还是四呢吗?改成正常的,那你这儿呢,同学我给你注掉吧,这一行行不?那在这儿也改一下,别读这PERSON4了,没这玩意儿对吧?这会儿给它注掉OK好了,回到这儿,这时候刷新一波,重新存来到这儿A打开这个section store age啊,这东西还在是吧。
18:36
它干掉好是不是在这了啊,然后我读呢,走呗,那就读完了呗,哎,那我要删除呢,那你点呗也能删除,那清空呢,也能清空session store age最大的特点就是你存完的东西只要浏览器一关,哎,只要一关它就被清空了,绘画吗?浏览器都关了,本次绘画结束了呀,来看一下效果啊,打开这个application,同学,你看同学没了吧,但是local里的是不是有,那可能有些同学问了老师local到age里的东西什么时候没呢?同学他只有两种情况啊,只有两种情况可能没。第一种情况就是你引导着用户去点了某些按钮,操作了那个API,可能是remove item或者是clear会导致这里东西没。还有一种情况就是用户主动的清空缓存,它也会没,你比如说来清空缓存,清除数据,那这个时候回到这儿,你再一刷新各位啊,诶再一刷新说老师咋还有呢。
19:36
他有的时候这会儿啊,不及时,你给它切出去,你再切回来,他可能就没了,说老师这还在呀,嗯,那你看一下吧,可能是你清除东西的时候啊,咋的清除的不干净来就这就这都给它勾上什么下载记录这些啊,密码我就不清了啊,什么网站设置来清除,这回再试一下。这就比较狠了啊,密码我不能清,我很多密码都在这里记着呢,来到这儿,同学你看一下是不是没了,而且你看整个页面的缩放也回到最初始的那种大小了,对吧?哎,这回东西没了,如果你遇到了说老师我清除了缓存东西怎么还在呀,你切出去再切回来,有可能它就没了,或者说你检查一下你清除的那些东西啊,是否清除的很干净啊,其实主要是哪呢?一个是网站设置,一个是这个cookie及其他网站数据,这个里边其实就包含着谁呢?那个local storageage OK,各位好,哎,那咱就把这个呢就说完了,那讲完一个东西是不是都得来一波总结呀,来,走,你总结一波啊,最后一个,嗯,在这呢,说老师不是叫浏览器的本地存储吗?Local store age session store统称为web store age来读一读各位,它存储内容的大小啊,一般是五兆左右,说老师那这也太小了呀,各位啊,你可要知道它那个K和Y。
20:55
六课都是字符串啊,同学你想想存字符串,你存了五兆左右的字符串,那已经很多了,那文字是非常多的,一般来说够你用了是不?舒老师那记住了,都是五兆,不大不小不是的,不同的浏览器呢,可能还不一样啊。第二句话,浏览器端通过window点这个和这个来实现本地存储机制,如果你的东西只是本次绘画的时候再用,你就比如说你做一个游戏,这个游戏如果你的要求是能够记录上一关多少分,一共啊攒了多少分啊,那你可以用session storage或者local storage,但如果说你的要求是关闭浏览器,哎,用户呢,打开这个游戏还能接着昨天的去玩,那你就得用谁啊,Local storageage对不对,因为SESSION1关浏览器它就没了是不?各位啊,那这有一个相关API,你看咱都用了吧,Set item get item item是不备注来读一下session store存储的内容会随着浏览器窗口的关闭而消失。
21:55
Local storageage中存储的内容需要手动清除才会消失,手动清除就有两种方式清除,一调用那API去清除,第二个就是关闭那个啊,是清空整个缓存,不是关闭浏览器,是清空缓存,对吧?要么就是借助API手动清除,要么是你亲自的清空缓存啊。第三个再读一遍,就是什么什么什么什到点get item,如果叉叉叉对应的value获取不到,那怎么办呀?返回的就是no,那么jason.pass no的结果呢,就依然是no OK,咱就把这个讲完了,浏览器本地存储统称为web storageage OK,好了,那这一小节呢,停。
我来说两句