web前端开发|js 不同页面间传递值并取值，html不同页面间数据传递 web前端开发|js

以前没用到过页面间传递参数再从后台获取数据，自己总结了一些。
先说需求：现在有页面pageA.html 和页面pageB.html，页面pageA.html中有一事件，当这个事件触发时会打开页面pageB.html。而且页面pageB.html中的一些内容需要根据pageA.html 中的一些值来判断显示哪些内容或者做一些操作。
方法一：
(1) pageA.html 中的事件为 window.open('pageB.html')或者href="https://www.it610.com/article/pageB.html"。
(2)我们把要传递的值加到要打开页面的地址后面：window.open('pageB.html?name&code&....')。
其中name、code等就是要传递的值。&是为便于取多个值而加的分隔符，用'-'、'|'等符号也行，下面会在用到的时候说明其作用（不加也行）。
(3)使用 window.location.search()方法获取地址栏要传递的参数。得到"?name&code"。可以把其赋给一个变量：var perimeters =window.location.search;
(4)因为'?'也会被取到所以要用perimeters.substr(1)取到'?'之后的值。
(5)再把取到的值分割成包含一个一个值的数组，用perimeters.substr(1).split('&'),split('&')的作用就是以'&'为标记，把字符串分割成字符串数组。这里面'&'的作用就凸现出来了。
(6)到这里基本上就能得到想要的值了。不过还会遇到一个问题，如果值是字母、数字显示是正常的，可如果传递的值是汉字就会出现乱码。这里就要用到decodeURI()方法来转换一下，就像：
decodeURI(perimeters.substr(1).split('&')[0]); 就OK了。

window.open('pageB.html?name&code&....')在pageB.html中var perimeters = window.location.search; perimeters = decodeURI(perimeters.substr(1).split('&')[0]);

方法二：
方法一的缺点是当有一个以上的值需要传递的时候，需要准确记录每个值的位置。而本方法是以名称值对的方式传递，比较友好。
从地址栏获取参数，name(类型string)为要获取的参数名

function getUrlParam(name) {var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)") ，// 构造一个含有目标参数的正则表达式对象r = window.location.search.substr(1).match(reg); // 匹配目标参数 if (r != null) return decodeURI(r[2]); // 返回参数值 return null; // 如果不存在，返回null }例：pageB.html ? name = xiaocao & code=xiaocao0001console.log(getUrlParam('name')) // 输出 'xiaocao' console.log(getUrlParam('code')) // 输出 'xiaocao0001'

方法三：localStorage或者sessionStorage本地缓存
地址栏传参容易被修改，也不安全，可以用localStorage或者sessionStorage
【web前端开发|js 不同页面间传递值并取值，html不同页面间数据传递】例：

设置：localStorage.setItem('obj', JSON.stringify({ name: 'xiaocao', code: 'xiaocao0001' })); 取出：var obj = JSON.parse(localStorage.getItem('obj')); // obj = {name:'xiaocao',code:'xiaocao0001'}

本地存取的方法要记得用过之后清除缓存(localStorage.removeItem('obj'); )，避免不必要的错误。
sessionStorage类似，区别在于存储在 sessionStorage 里面的数据在页面会话结束时会被清除
以上三种方法各有优缺点，可根据具体情况选用