javascript静态页面传值的三种方法分享

以下是“javascript静态页面传值的三种方法分享”的完整攻略：

一、前言

在网页应用开发中，常常需要将一个页面的数据传递给另一个页面，在静态网页中实现页面之间的数据传递非常重要。本文将介绍三种常见的静态页面传值的方法，并提供相应的示例代码。

二、URL传参

URL传参是应用最广泛的传值方式之一，在URL中添加参数，然后通过JavaScript获取这些参数，这种方式需要用到面向对象编程中的构造函数Function()。

下面提供一个简单的示例：

1. 在HTML页面中添加链接，如下：

<a href="next.html?name=John&age=18">Next Page</a>

1. 在目标页面中通过JavaScript获取URL参数，如下：

function getUrlParams() {
    var params = {};
    if (location.search) {
        var arr = location.search.substring(1).split('&');
        for (var i = 0; i < arr.length; i++) {
            var tmp = arr[i].split('=');
            params[tmp[0]] = tmp[1];
        }
    }
    return params;
}

var params = getUrlParams();
console.log(params.name); // 输出：John
console.log(params.age);  // 输出：18 

三、cookie跨页面传值

cookie是一种客户端存储技术，通过在当前页面中设置cookie，可以在传递数据时将数据存入cookie中，在下一个页面中获取这些数据。下面提供一个简单的示例：

1. 在当前页面中设置cookie，如下：

document.cookie = "name=John";
document.cookie = "age=18";

1. 在目标页面中获取cookie，如下：

function getCookie(name) {
    var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
    if (arr = document.cookie.match(reg)) return unescape(arr[2]);
    else return null;
}

console.log(getCookie("name")); // 输出：John
console.log(getCookie("age"));  // 输出：18 

四、localStorage跨页面传值

localStorage是一种客户端存储技术，通过在当前页面中设置localStorage，可以在传递数据时将数据存入localStorage中，在下一个页面中获取这些数据。下面提供一个简单的示例：

1. 在当前页面中设置localStorage，如下：

localStorage.setItem("name", "John");
localStorage.setItem("age", "18");

1. 在目标页面中获取localStorage，如下：

console.log(localStorage.getItem("name")); // 输出：John
console.log(localStorage.getItem("age"));  // 输出：18 

五、总结

本文介绍了静态网页中常用的三种传值方式：URL传参、cookie跨页面传值和localStorage跨页面传值，并提供了相应的示例代码。这些方法都有其特点和适用场景，需要根据实际情况选择。