JS实用功能-11、页面参数传递到下一页面

好久没和大家见面了，今天继续和大家讲讲JS中的实用功能，如何在页面间传递参数。

页面携带参数跳转的需求，碰到过不少，下面就说说在日常开发中常用到的原生的一些方法吧！

一、地址栏传递

在浏览器地址栏的URL中，除了我们看到的域名路径外，其实还可以通过‘?’来添加参数。

const BASE_URL = 'http://example.com/path/index.html?message=hello&who=world';

从上面的一串路径可以得到的参数有：

//=>message = 'hello'
//=>who = 'world'

那么用法是怎样的呢？当需要从当前页面跳转到下一页面，我们可以在跳转的路径后面用'?'分别添加‘key’和‘value’,多个参数记得用'&'连接符。

window.location.href = '/path/index.html?message=hello&who=world';

在使用href跳转方法后，当前页面跳转到了index页面，地址栏中也相应的变化了。

 接下来要做的就是获取index页面中的参数：

const getQuery = function(name) {
        const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
        const r = window.location.search.substr(1).match(reg);
        if (r != null) {
            return decodeURI(r[2]);
        }
        return null;
    }
    console.log(getQuery('message'), getQuery('who'));
    //=> hello, world

还可以通过URL()方法来获取：

const url = new URL(window.location.href);
url.searchParams.get('message'); // => 'hello'
url.searchParams.get('missing'); // => null

二、sessionStorage传递

sessionStorage属性允许在浏览器中存储 key/value 对的数据，但sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

当我们要进行页面跳转的时候，可以设置sessionStorage：

window.sessionStorage.setItem('name', 'padding2020');

可以在浏览器开发者模式下的application看到设置的缓存。

 在跳转后页面，通过getItem方法来获取：

window.sessionStorage.getItem('name');
//=> 'padding2020'

需要注意的是：打开多个相同的URL的Tabs页面，会创建各自的sessionStorage。

三、localStorage传递

localStorage 类似 sessionStorage，但其区别在于：存储在 localStorage 的数据可以长期保留；而当页面会话结束——也就是说，当页面被关闭时，存储在 sessionStorage 的数据会被清除 。

另外，localStorage 中的键值对总是以字符串的形式存储。

window.localStorage.setItem('name', 'padding2020');

增加完毕之后，同样的可以在浏览器开发者工具下的application中看到：

 想要获取的话，可以通过getItem方法获取。

window.localStorage.getItem('name');
    //=> 'padding2020'

四、总结

上面三种是平常在原生JS开发中用的最多的了，可以根据需要来使用。

当然也还有其他的方法，比如vue框架中就封装有页面传参的方法，总之，方法肯定是比需求多的。