发表于: 2019-11-22 21:46:14

1 1207


今天完成的事情:


完成csdn文档编辑


完成JS传参方式整理


JS中的传参方式

 

传统的前端开发中,页面之间是少有参数交互的,甚至没有,而在如今的前端环境下,

一个稍微正式点的项目都不可能少了页面间传参,页面的跨越、服务器后台进行数据请求等,都需要一个或多个传参的方法。

js中的传值方式,对于简单类型(比如字符串和数值)就是值传递和引用传递。但是HTML页面之间如何传递数据?

如果是动态页面,根本就不需要考虑这个问题,可以如果是一个纯HTML+JavaScript的应用,

无法使用数据库等操作,没有保存数据,光依靠前端的手段该如何实现页面之间的传递数据和参数呢?

 

第一种常见的是通过url传值

 

一、URL

 

把参数值附在url后面传递到其他页面

主要原理是:通过GET方法然后获取URL从中解析出传递的数据

//获取到的url值是以"?"开头的url

var deocdeURL = decodeURI(location.search);//解码url

//封装的解析url的方法

function doClickfamg(){

var pureURL = deocdeURL.split("?")[1];//获取"?"以后的参数

var valuesArray = pureURL.split("&");

var url_Object = new Object();

for(var i = 0;i< valuesArray.length;i++){

var key_value = valuesArray[i].split("=");

//动态给对象添加keyvalue

//是以传递过来的keyvalue作为解析后的新的对象的keyvalue

url_Object[key_value[0]] = key_value[1];

}

return url_Object;//返回对象

}

 

获取url传的值

//调用解析方法

var mydecodeURI = doClickfamg();

//比如我要知道传递的key2value是什么

alert(mydecodeURI.key2);

 

优缺点

优点

1.URL地址法简洁易用可同时传递多个字符型参数;

2.URL地址法可以很方便的在页面之间切换并传递参数,无需额外的处理,基于正常情况比较不会性能损失;

不足:

3.URL传递参数长度受限,最大为2K

4.URL只能传递字符型参数,传递中文时由于发送页面和接收页面的字符编码方式不一样而导致参数解析处理错误,参数包含中文时可能出现乱码或者参数接收错误;

5.URL地址在客户端可见,所以涉及隐私的参数需进行加密后才能进行传递,不加密传输会导致信息泄露,产生安全隐患。

 

Cookie

Cookie是什么

 

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 两样商品了。

这样一来,当用户关闭网页,过三天再打开网页的时候,依然可以看到 A1A2 躺在购物车里,因为浏览器并不会无缘无故地删除这个 Cookie

借此,就达到里记录用户操作历史的目的了。

 

Cookie的一些特点。

1.Cookie可以使用 js 在浏览器直接设置(用于记录不敏感信息,如用户名), 也可以在服务端通使用 HTTP 协议规定的 set-cookie

 

来让浏览器种下Cookie,这是最常见的做法。

 

2.每次网络请求 Request headers 中都会带上Cookie。所以如果 Cookie太多太大对传输效率会有影响。

 

3.一般浏览器存储Cookie最大容量为4k,所以大量数据不要存到Cookie

 

使用浏览器Cookie传递参数

Cookie 是一些数据, 存储于你电脑上的文本文件中。

web 服务器向浏览器发送 web 页面时,在连接关闭后,服务端不会记录用户的信息。

Cookie 的作用就是用于解决 "如何记录客户端的用户信息":

当用户访问 web 页面时,他的名字可以记录在 cookie 中。

在用户下一次访问该页面时,可以在 cookie 中读取用户访问记录。

Cookie 以名/值对形式存储

js中操作cookie

document.cookie = "userName = mike";

还可以在cookie中添加过期时间,默认在浏览器关闭时删除cookie

document.cookie = "userName = mike expires = Mon,14 Oct 2018 12:00:00 GMT";

读取cookie

let data = document.cookie;

 

 

 

H5 web storage

 

localStroage sessionStorage

存储有效期

localStorage

永久性。除非WEB应用刻意删除存储的数据,或者用户通过设置浏览器配置来删除,否则数据会一直保留在用户电脑上,永不过期。

实际上,localStorage的数据是写入磁盘中,每次读取数据时,实际上是从硬盘驱动器上读取这些字节。

sessionStorage

窗口或标签页被永久关闭,则通过sessionStorage存储的数据也被删除。

 

常用操作

localStorage.setItem("x",1);//"x"的名字存储一个数值

localStorage.x = 1;//直接向 Web 存储对象添加键/值对

 

localStorage.getItem("x");//获取数值

localStorage.x;//直接从 Web 存储对象中检索键/值对

 

localStorage.removeItem("x");//删除“x”项。

//removeItem是唯一通用的能删除单个名值对的方式。(因为IE8不支持delete操作符)

localStorage.clear();//全部删除。唯一能删除存储对象中所有名值对的方式

 

//将一个数组存储为字符串

var myArray = new Array('First Name', 'Last Name', 'Email Address');

localStorage.formData = JSON.stringify(myArray);

 

//检索数组的字符串版本并将它转换成一个可用的 JavaScript 数组

var myArray = JSON.parse(localStorage.formData);

 

 



返回列表 返回列表
评论

    分享到