00:00
接下来做下一个保存,这个保存这块我先问一下大家,你们有没有学过这个3STORY。它是H5的一个,嗯,本地。存储技术,这是好好听这个啊,它这个是一道那个。笔试题或者说是面试也会当面问你,我刚问的大家是这个,你们之前学过是session嘛,我现在问的是SESSION10STORAGE,哎,与它区别的还有一个叫local。ST。就是他,然后通常大家问的时候还会和这个去对比的问你。这三个有什么区别?先说一下这两个,这两个是H5的一个本地存储技术。
01:00
而cookie cookie大家是不是最早就学过它?Cookie的作用是干嘛的?最简单的,它是用于浏览器的和。服务器端进行通信的。对不对,那cookie的特点有哪些呢?首先它的大小我刚听到了,大概只有4KB左右,对吧,还有什么。个数。20个是吧,最大你们是想做这个吗。其实那个不是重点啊,Cookie首先大小是不是最大是4K米左右,然后你想通常问你cookie是想让你回答cookie有什么优点或者是缺点。
02:01
Cookie有一些缺点,我不知道你们知道不,你比如说他。每次啊,发送请求的时候,如果说第一次发送了携带了cookie以后,以后在服务器端和浏览器端交互的时候,是不是都会携带这个家伙。这样的话,无形中导致。占用什么?带宽,你比如说我只是有一次我需要它,其他时刻我不需要,但是呢,他每次都会携带。无形中就是占用带宽。Cookie保存在哪?浏览器的还是服务器的?好。不存在。浏览器吧。还有一个cookie容易被截获。这个知道吗?容易被截获,最终导致的问题是不安全的。
03:00
说一个你们日常生活中遇到呢,尤其是女生,有没有发现你们上一些购物网站,比如京东,淘宝,看一些商品,你看完了没有买?然后你再去浏览网页的时候,你看一下,比如说你看百度看网页。你看一下你的右下角,会时不时的出来一些京东或者淘宝一些推送的广告。而这些广告正好是你前几天浏览的相关产品一类,你比如说你看个衣服,我逛淘宝,哎,没事干,看看衣服看完了没有买过两天呢,你去比如说哎百度去查一些我们技术相关的问题,右下角经常会推送一些广告。而这个广告正好是和你之前看的息息相关,为什么会这样呢?他怎么知道你之前看过衣服呢?就是因为你的cookie被解惑。现在有一些无良的公司啊,他专门去干这个事情,结合用户的cook肤品,然后卖给一些公司。
04:00
能懂不?嗯,因为你cookie里面很有可能放着你平时的一些浏览记录。对不对啊,我就我如果是知道了你浏览记录,那么我就知道你想要干嘛。嗯。在中国这一方面管的还不太严,我前两天看了个新闻啊,是韩国还是哪,他们已经针对这个搬了一个搬,搬出了一项法律。就是说什么时候我可以保存用户的cookie,他必须要弹出一个提醒框,询问用户是否去保存一些数据到cookie,否则的话,他根本没有权限,没有权利去把用户的一些啊,平时的一些浏览习惯呀,或者用户的一些基本数据给大家保存进去。因为你一旦被截获了的话,最终受害的是用户。哎,这是cookie。然后我们回头来看一下上面这两个30STORAGE,还有local storage 30storage和local storage,它俩都是H5,提供了一个一项本地存储技术。
05:04
Session什么意思啊,这个单词。绘画。能懂不,在这儿呢,它叫绘画存储。绘画是什么意思呢?我们就可以,哎,先来看这版local什么意思啊。本地,在这儿它表示的是永久存储。一说到绘画存储和永久存储,我们第一个能想到的是它里边的一个叫生命周期。生命周期就是它存活的时间。绘画是什么意思啊?浏览器夜车打开到关闭的过程,这是一次绘画吧,也就是说他的生命周期就是浏览器。哎,打开到。关闭的过程。那永久这个我就不用说了。他的生命。
06:02
哎,这个应该是这个生命啊,大家看生命周期永久,除非什么。卸载这个你卸载不了,你除非把浏览器卸了,人为删除,我们可以删掉它。坏了,来,接下来我们对比这cookie来看cookie大小是不是只有54KB左右啊,它俩的大小大概是五。找。五兆和4KB,有的同学可能在想,这五兆其实也没有多大。但是你要想五兆和4KB他俩要翻多少倍啊?一兆等于多少KB?1024来,你算一下多少倍?这已经是一个质的飞跃了。不要小看这五兆。啊,而local story它有时候五兆,你其实在那你可以去描述一下,甚至。
07:01
呃,甚至。设置怎么拼?更大。至于说这个有多大,至今没有人给出一个准确的答案。好一个生命周期,一个大小,接下来哎,我们还要说他俩保存的位置。都在哪儿?浏览器的。你看同样同样的我这个啊,也是在浏览器端。没有什么问题,然后我说一下他俩的方法。首先storage和local story它是一个对象。怎么去用它呢?里面我们通常使用的有三个方法。一个叫set set什么意思?设置的意思在这,你通常要放一个K,后边是value。
08:01
K是对当前你要保存数据的一个标识嘛,它最终其实从进去是以对象的形式放进去。这个P就是你这的K,好,然后这个是。是设置,那这个大家之前一看应该弄得懂。Get就像是你发送那个请求一样。get通常什么用来获取数据的?在这它就是用来获取我之前保存的数据。在这个时候,你只需要传一个参数。谁呀?肯定是K,因为我通过这个标识才能拿到它对应的数据吧,还有一个。应该好理解。Remove。也是传几个参数啊。根据标识去删对应的数据。这个好理解吧,而他俩在这方面使用方式是一模一样的,一模一样。
09:04
那讲到这以后,再说一下这个cookie的生命周期,不知道大家有知不知道。Cookie也有生命周期啊。Cookie其实分为两种,一种叫绘画cookie。那这个你们应该知道它的生命周期是多少?是不是这个绘画结束了它的生命周期就完了。还有一种就是说你可永久。永久cookie,或者是叫这种你可以去人为设置cookie的生命周期,其实我们也经常这样做。那么这个生命周期的时间就是人为设置的时间。你想设置它多长就是多长,如果说不设置的话,绘画固定能懂不?啊,这些东西呢,我先在这大家过一下,这之后呢,我会专门给你发一个关于这个的笔记。
10:04
能懂吧,嗯。保存一下放到哪,放到桌面。啊。走了。哦,嗯,没事,我最后会发给大家,嗯,行。那知道了,有了那些基础以后,我们接下来来写这个功能。当我点击的时候,我。你看我一点确定这是不是没了,它是放到哪了,告诉大家。你们这个控制台这些都会用吗?应该差不多。来,现在需要大家去找一个东西叫application,点开这个application往这边看。看到这两个没有。
11:01
这不就local storage和32吧,也就说你在浏览器端这能直接的看到它。你点开这个,这是不是有个链接一样的东西啊,哎,在这儿有没有看到这k value6,这个k value下面就他自己储存的东西。然后我刚刚放的应该是在这儿。说明我刚刚用的是30STORY去存的,首先你看我这个K,这个K你可以随便去洗。然后这个value不是三个D吗?你再看看我输三个A。保存一下走你。是不是把之前那个替换了。这清空了很正常,当我在点击读取的时候,就是到这儿来读的,读到它以后拿到数据是不是又显示在页面。这没问题吧?删除啊删除,我在这儿只是做了一个将我页面显示的这个清空而已。好了。好吧,开始写写。
12:02
三个八字,首先你要实现那些功能,避免不了,这叫绑定事件,保存用户。来NG click读取的话吧。还有一个NG。删除。啊,大家想用这个是吧,人问好,现在三个方法有了,你是不是得去这边去定义一下。来第一个,第一保存数据的方法。Co点。Co点我上来是不是有个C吧,那当我点击这个C这个八层的时候,我第一件事要要去干嘛。是不是应该是拿到用户输入的数据,输入的数据是谁啊。哎,其实不就是message吗?这没问题吧,然后。
13:02
你想办法要保存,那我们先用一下这个local storage吧,首先保存数据用哪个方法?很好,它是不是传两个参数,第一个是K,你随便起什么名字。习惯性的就是其他。接下来后边是不是要保存的数据啊,按理来说我们是不是直接写的是。他呀。但是现在和大家讲一个呃,小常识啊,就是大家在市面上大家在用这个local,还有session的时候,也是我在进行数据的存储的时候,我通常会将这个数据转化为杰森。为什么要转安全一点,相对使使用上相对安全一点。因为杰森不是一种数据传输的格式吗?而我们现在发请求更最多的用的就是杰森法啊,在这儿也统一的转化为杰森,先不要管它是什么。
14:00
所以你可以先把这个拿走。如何转换成金子。你们应该是学过。结实点,Pass。是不是?对啥?G pass是将GS的对象转化为原生的GS对象啊。你现在是要转换成什么阶层的字符串?应该是这个string方案。这个讲过吧。答案,记不住,怎么记啊?这个是不是要转化成字符串,你就记住这个,我当初最早接触这个string I fly,就I can't fly,对不对,Stream。形象记忆法。没问题吧,现在读进去了,来,我们来测一下我们的。刷新一下,先到application找到十现在里面有数据吗?
15:02
没有吧?随便输点儿走你。其实保存了,你说保存在哪儿了?这不是吗?用哪个都行,Log logo的话,只不过是它生命周期不是长一点嘛,那么就用这个,现在这个是不是存进来了,从进来以后,对刚刚我们这有一个小提示。看到没有,那其实你在从之前可以先给他lo一下,这些提示呢,倒是都是安慰用户的。比如说not。哎,前段时间网上比较火的是知乎上,应该说最牛逼的一段代码,不知你们看过没有,就是一个alert,诶,用户点击一个按钮去清,清除一个缓存,里边就写了一个空的那个。叫什么来着,根本没有执行就是,但是一点击用户就看到啊,缓存已经清除,都是骗用户的啊这。
16:03
最牛逼的一段代码。好了。我们现在这个来刷新AAA保存,这是不是aler塔总以是不是进来了,然后。你要做的是把这个清空。这个其实对于我们来说一点不难。页面显示这个清空怎么办?怎么清空啊。啊。你注意了,你现在在GS里面页面显示的数据跟我内存里面的message是息息相关的。我如果让页面显示为空的话,其实只需要做一步。这不是吗?给它还原为空串是不是就OK了?刷新走你没问题吧,那接下来再读取啊,这一块我们再来写写。
17:01
这一把定义,哎,读取数据的方法。Dollar for scope点我刚定义了个叫read的方法来function怎么读?首先你是不是还得调用local sorry,第二这一把应该是用电。它里面需要传一个参数,就是你之前存进去的那个K。记住,这儿不能随便写吧。是不是用它。放进来。那读取完了,我们要干什么事?显示在页面吧,这个应该会。怎么显示的一般。你不还是赋值给message吗?只有他是不是有能力把你的东西显示在页面。但是啊,你现在读到的是什么啊。你是一个杰森的字符串,你应该是将它杰森点pass转换回来,能懂不?
18:03
好了,那这个时候来,我来刷新一下。注意页面现在是不是没有,但是我logo里面是不是有。我点什么点读取。是不是进来了?进来了,来,现在大家看,我可以在这先把这个删掉,你们移到这个HTB这个请求,这这是不是有个。现在是不是没有了?要来刷新一下上来我没有那个数据。但是有的用户呢,他会这样去做,他上来根本没有保存过,上来就给你点什么。有没有发现有问题啊?报错了,报什么错呢?又是这个Les恶。我上来的时候还好好的,就是点了个读取是不报这个错。
19:01
那问题出在哪儿了?从这来看,就这一步。先和大家说一下啊,Local get,它通过一个K来取value,你每次都能取得到吗?有这种情况,就是说我里边没有这个K怎么办。对不对,现在是不是就是没有那个K。那他想取值,取到的是什么呢?先跟大家说一下啊。这叫好。拿到是now,然后给了结实点pass,再一转,换完还是no。然后闹点认识又出错了。这逻辑是对的,那也就是说你要防止用户上来就去点那个读取。说白了,上来点击读取肯定是no,我是不是得处理一下。
20:03
嚯,这预算不用过吧?当前边为now,它转化为布尔值是否为false?这个没问题吧。这现在不是那么吗。没问题吧,我可以给你们打印一下,让大家有点疑惑。COO了,这不是拿到这个值吗?来,先让他打印一下。刷新一下,看lo读取。是不是就是那。哎,那当他没闹的时候,我用一个或或的意思,前面没放我是不是走后边。你得返回一个不是浪漫的东西。而且要保证上面这这个认字这儿不会出错。放什么?有同学上来是不是想到这个空创?或者说压根没想到这吗?放什么?
21:04
你们上来就想到他了,为什么不说空串?那先来看一下库串行不行。我得,我这是故意挖个坑,得给你们看到一些现象,快点找你。你会发现又报错了,但是报的还和刚才不一样。现在他说expected,哎,不是被期望的一个东西,这个你看以后看到这个报错,告诉你哪错了,说明你给杰森pass里面放的东西不对了。那当我前边没闹的时候走,后边相当于是给杰森帕是不是放了一个空串过来?而接点pass问一下大家,他到底是干嘛的?将G色的字符串转换为原生GS对应的一些对象或者数组。
22:01
那我这儿本来是不要放一个阶层的对象或者数组,那你现在放的这是阶层的东西吗?你这就咔,就写了个字符串,你就说他非要说他是阶层数据啊。这就是一个普通的字符串,对不对。当你放一个普通的自符段进来的时候,接实点怕是又通不过。他会报错。能懂吗?你们对接着了解吗?我问一下大家,什么叫阶层字符串,什么叫什么叫阶层数据?我就写一个这个,这是阶层数据吗?那什么事啊,双引号是不是。啊。接S数据只有接层对象的数组记住了,没有单纯的什么阶层字符串。你什么时候接到这种是精神状?里边必然,要不然就是对象,要不然就是什么数组,这才是阶层的,哎,数据。
23:04
为什么要有对象和阶层对象和阶层数组的概念呢?是因为它最终要被转化为原生的GS对象。行有数组。我介绍的对象和原生的GS对象是一一对应的。那这个时候你返回空不行,你返回什么呀。我刚听到有的同学说是不放一个。控制对象,控制对象最起码我敢保证放到pass里面不会报错,是因为现在不是一个相当于是一个阶层对象吗?只不过我这对象空的不影响,来,我们来看一看,这是你们说的啊。走,你。报错是不会报错了,但是你返回那空内项显示在页面,你会看到的是这个。这个其实是检测过你给我的目标的一个类。
24:04
我不知道你们有没有之前alert过一个对象。俄罗斯对现你看到的是什么样的?是不是就是这样,你直接把一个对象显示在页面就是它,所以说返回对象还不行。那怎么办?你别看就这点东西,升级到的小支点还挺多的。怎么办?对象什么不行告诉他。我放一个数组还是空的,首先数组满足于这个pass,这还满足于这个论。关键是看下一步我这页面显示的是什么,走你。有任何效果吗?没有,那这样的话,哎,对于用户体验这一块也不会出错。记住了,这一定要考虑用户上来去点击的情况,也是我们这一步就是处理。
25:05
那样的情况。那这个是读取。下来你们也一定要自己敲一遍去理解一下来,还有最后一个到购物点。Remove remove,简单remove,我们现在可以做一个删除,删除的话首先你是local storage,点这个简单,它里面是不是就一个。同时你在删除logo的时候,你可以把页面显示的数据也给他干完了。清空一下,哎,让用户看到更真实一点。对不对。现在来刷新一下,来到application,现在没有上来,咔咔咔,用户移动书保存是不是进来了?
26:02
读取是不是又读出去了,然后走,你这是不是两头都没有了。那这样的话,我们才是算实现了最终的这个。
我来说两句