静态页面的值传递(三部曲)

静态页面的值传递，是指在没有使用后端语言的情况下，通过前端技术在多个页面之间传递数据，实现多页面数据共享的目的。其实现的主要步骤可以归纳为以下三步:

1. 使用URL传递参数
   在页面A中使用URL传递参数，在链接中添加参数，并在页面B中通过解析URL获取传递的参数值，从而实现两个页面间的数据传递。

示例1: 在页面A中有一个按钮，点击后跳转至页面B，并将参数id值设置为3，代码如下：

<!-- 在页面A中设置按钮 -->
<button onclick="location.href='pageB.html?id=3'">跳转至页面B</button>

在页面B中解析URL参数，并使用JavaScript获取传递的参数值：

// 获取页面URL中的参数值
function getQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return decodeURIComponent(r[2]); return null;
}

// 获取id参数值并弹出提示框
var id = getQueryString("id");
alert("页面B中获取到id参数值为：" + id);

示例2: 在页面A中有一个输入框，输入完数据后跳转至页面B，并将输入框的值传递到页面B，代码如下：

<!-- 在页面A中设置输入框和按钮 -->
<input type="text" id="inputText">
<button onclick="location.href='pageB.html?name='+document.getElementById('inputText').value">跳转至页面B</button>

在页面B中解析URL参数，并使用JavaScript获取传递的参数值：

// 获取页面URL中的参数值
function getQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return decodeURIComponent(r[2]); return null;
}

// 获取name参数值并弹出提示框
var name = getQueryString("name");
alert("页面B中获取到的name参数值为：" + name);

1. 使用localStorage存储数据
   在页面A中使用localStorage存储数据，在页面B中通过获取localStorage中的数据来获取页面A中的数据，实现数据共享。

示例1: 在页面A中有一个按钮，点击后将数据存储到localStorage中，代码如下：

// 在页面A中存储数据到localStorage中
localStorage.setItem("name", "tom");

在页面B中获取localStorage中的数据:

// 在页面B中获取localStorage中的数据
var name = localStorage.getItem("name");
alert("页面B中获取到的name值为：" + name);

示例2: 在页面A中有一个输入框，输入完数据后将数据存储到localStorage中，代码如下：

<!-- 在页面A中设置输入框和按钮 -->
<input type="text" id="inputText">
<button onclick="localStorage.setItem('name', document.getElementById('inputText').value)">存储到localStorage中</button>

在页面B中获取localStorage中的数据:

// 在页面B中获取localStorage中的数据
var name = localStorage.getItem("name");
alert("页面B中获取到的name值为：" + name);

1. 使用cookie存储数据

在页面A中使用cookie存储数据，在页面B中通过获取cookie中的数据来获取页面A中的数据，实现数据共享。

示例1: 在页面A中有一个按钮，点击后将数据存储到cookie中，代码如下：

// 在页面A中存储数据到cookie中
document.cookie = "name=tom;path=/";

在页面B中获取cookie中的数据:

// 在页面B中获取cookie中的数据
function getCookie(name) {
    var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
    if (arr != null) {
        return unescape(arr[2]);
    }
    return null;
}

var name = getCookie("name");
alert("页面B中获取到的name值为：" + name);

示例2: 在页面A中有一个输入框，输入完数据后将数据存储到cookie中，代码如下：

<!-- 在页面A中设置输入框和按钮 -->
<input type="text" id="inputText">
<button onclick="document.cookie='name='+document.getElementById('inputText').value+';path=/'">存储到cookie中</button>

在页面B中获取cookie中的数据:

// 在页面B中获取cookie中的数据
function getCookie(name) {
    var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
    if (arr != null) {
        return unescape(arr[2]);
    }
    return null;
}

var name = getCookie("name");
alert("页面B中获取到的name值为：" + name);

以上就是静态页面的值传递（三部曲）的完整攻略及两个示例说明，希望对你有所帮助。