html中调用js带参数传递,JS传参技巧总结

1.隐式创建 html 标签

这种方法一般配合 ajax，上面的 value 使用了模板引擎

2.window['data']

window["name"] = "the window object";

3.使用 localStorage，cookie 等存储

window.localStorage.setItem("name", "xiaoyueyue");

window.localStorage.getItem("name");

特点：cookie，localStorage，sessionStorage，indexDB

特性

cookie

localStorage

sessionStorage

indexDB

数据生命周期

一般由服务器生成，可以设置过期时间

除非被清理，否则一直存在

页面关闭就清理

除非被清理，否则一直存在

数据存储大小

4K

5M

5M

无限

与服务端通信

每次都会携带在 header 中，对于请求性能影响

不参与

不参与

不参与

从上表可以看到，cookie 已经不建议用于存储。如果没有大量数据存储需求的话，可以使用 localStorage 和 sessionStorage 。对于不怎么改变的数据尽量使用 localStorage 存储，否则可以用 sessionStorage 存储。

注意点:存储object类型数据，此深拷贝方法会忽略掉函数和 undefined

var obj = {

type: undefined,

text: "xiaoyueyue",

methord: function() {

alert("I am an methord");

}

};

localStorage.setItem("data", JSON.stringify(obj));

console.log(JSON.parse(localStorage.getItem("data"))); // {text: "xiaoyueyue"}

4.获取地址栏方法

自己封装的方法

function parseParam(url) {

var paramArr = decodeURI(url)

.split("?")[1]

.split("&"),

obj = {};

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

var item = paramArr[i];

if (item.indexOf("=") != -1) {

var tmp = item.split("=");

obj[tmp[0]] = tmp[1];

} else {

obj[item] = true;

}

}

return obj;

}

2.正则表达式方法

function GetQueryString(name) {

var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");

var r = window.location.search.substr(1).match(reg);

if (r != null) return unescape(r[2]);

return null;

}

5.标签绑定函数传参

test1

id="test"

name="123"

yue="xiaoyueyue"

friend="heizi"

οnclick="console.log(this.getAttribute('yue'),this.getAt