发表于: 2019-04-20 22:25:51
1 210
今天完成的事情:
1、今天继续写了任务代码,现在有了伪代码和任务思路之后,可以循序渐进的往下做任务了,虽然可能有些慢,但至少有方向了,不会卡了。
2、今天加入了一个web讨论组,和大家讨论了很多知识点,和最近遇到的困境,师兄们也和我聊了很多,开导了我,告诉我把任务分成一小块一小块的去做,就回简单很多。
3、今天因为身体的原因的状态一般,不过通过在网上看的一些文章还有和师兄们讨论也学到了很多东西。
明天计划的事情:
1、明天计划继续把代码尽快写完,按照师兄说的,把任务分成小块去做,相信会很快地。
遇到的问题:
1、今天主要就是心态上的调整,通过这次讨论也醒悟了许多,接下来就全力做任务吧。
收获:
深度思考
JS有哪几种传参方式?
一、背景介绍:
一个稍微正式点的项目都不可能少了页面间传参,页面的跨越、服务器后台进行数据请求等,都需要一个或多个传参的方法。那么参数在不同的页面间进行传递,一个页面的参数被另一页面使用,如何才能做到不同页面间进行参数传递?
二、在JS中有多种页面传递参数的方法:
1 URL
主要原理:通过GET方法然后获取URL从中解析出传递的数据。
优缺点
优点
1.URL地址法简洁易用可同时传递多个字符型参数;
2.URL地址法可以很方便的在页面之间切换并传递参数,无需额外的处理,基于正常情况比较不会性能损失;
不足:
3.URL传递参数长度受限,最大为2K;
4.URL只能传递字符型参数,传递中文时由于发送页面和接收页面的字符编码方式不一样而导致参数解析处理错误,参数包含中文时可能出现乱码或者参数接收错误;
5.URL地址在客户端可见,所以涉及隐私的参数需进行加密后才能进行传递,不加密传输会导致信息泄露,产生安全隐患。
2 Cookie
是什么:是当你浏览某网站时,网站存储在你机器上的一个小文本文件,
它记录了你的用户ID,密码、浏览过的网页、停留的时间等信息,
当你再次来到该网站时,网站通过读取Cookie,得知你的相关信息,就可以做出相应的动作,如在页面显示欢迎你的标语,或者让你不用输入ID、密码就直接登录等等
作用:Cookie一般有两个作用。
第一个作用是识别用户身份。
原理:
比如用户 A 用浏览器访问了 http://a.com,那么 http://a.com 的服务器就会立刻给 A 返回一段数据「uid=1」(这就Cookie)。
当 A再次访问 http://a.com 的其他页面时,就会附带上「uid=1」这段数据
同理,
用户 B 用浏览器访问 http://a.com 时,http://a.com 发现 B 没有附带 uid 数据,就给 B 分配了一个新的 uid,为2,然后返回给 B一段数据「uid=2」。B 之后访问 http://a.com 的时候,就会一直带上「uid=2」这段数据。
借此,
http://a.com 的服务器就能区分 A 和 B 两个用户了。
第二个作用是记录历史。
假设 http://a.com 是一个购物网站,当 A 在上面将商品 A1 、A2 加入购物车时,JS 可以改写 Cookie,改「uid=1;cart=A1,A2」,表示购物车里有 A1 和 A2 两样商品了。这样一来,当用户关闭网页,过三天再打开网页的时候,依然可以看到 A1、A2 躺在购物车里,因为浏览器并不会无缘无故地删除这个 Cookie。借此,就达到里记录用户操作历史的目的了。
特点
1.Cookie可以使用 js 在浏览器直接设置(用于记录不敏感信息,如用户名), 也可以在服务端通使用 HTTP 协议规定的 set-cookie
来让浏览器种下Cookie,这是最常见的做法。
2.每次网络请求 Request headers 中都会带上Cookie。所以如果 Cookie太多太大对传输效率会有影响。
3.一般浏览器存储Cookie最大容量为4k,所以大量数据不要存到Cookie。
4.由于 cookie 最终都是以文件形式存放在客户端计算机中,所以查看和修改 cookie 都是很方便的,这就是为什么常说 cookie 不能存放重要信息的原因
5.一个 cookie 的生命周期就是在浏览器关闭的时候结束。想要 cookie 能在浏览器关掉之后使用,就要为 cookie 设置有效期。
3 Form 表单
Form表单传值也是通过URL传递参数 。
通常使用的表单的提交方式主要是:post和get两种。
两者的区别在于:post方式是把数据内容放在请求的数据正文部分,没有长度的限制;
get方式则是把数据内容直接跟在请求的头部的URL后面,有长度的限制。
而一般在表单的数据提交中,都会选择POST方式,
因为使用GET方法数据是通过URL传递的,在地址栏中会直接看到传递的数据,这样就缺少安全性。
而使用POST传递时,是把提交的数据放置在HTTP包的包体中,地址栏不会看到数据。
4 H5 web storage
①、sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。
②、localStorage HTML5本地存储web storage特性的API之一,用于将大量数据(最大5M)保存在浏览器中
. 保存后数据永远存在不会失效过期,除非手动清除。
. 不参与网络传输。
. 一般用于性能优化,可以保存图片、js、css、html 模板、大量数据。
③、数据以 键/值 (key/value)对存在, web网页的数据只允许该域访问使用
④、不管是 localStorage,还是 sessionStorage,可使用的API都相同,常用的有如下几个(以localStorage为例):
保存数据:localStorage.setItem(key,value);
读取数据:localStorage.getItem(key);
删除单个数据:localStorage.removeItem(key);
删除所有数据:localStorage.clear();
得到某个索引的key:localStorage.key(index);
⑤、数据储存:
在有多组数据需要储存时,一般:
.建立一个新的对象,然后将多组数据储存在对象中,
.使用 JSON.stringify() 来将对象转换为字符串,
.使用localStorage.setItem(key,value);保存数据。
⑥、数据提取:
.使用localStorage.getItem(key)读取数据
. 使用 JSON.parse 方法将字符串转换为 JSON 对象。
. 直接引用对象的各个值。
评论