JavaScript静态页面传值技巧解析

"javascript静态页面传值的三种方法" 在网页开发中，JavaScript 是一种常用的脚本语言，用于处理客户端的数据和交互。当涉及到静态页面之间的数据传递时，有几种常见的方法。以下是标题和描述中提到的JavaScript静态页面传值的三种方法： 一、URL传值 这种方法是通过在URL中添加查询参数来传递值。例如，在一个HTML表单中，用户输入数据后，点击按钮，JavaScript函数会将这些值拼接到URL后面，并重定向到新的页面读取这些值。以下是一个简单的例子： ```html Post.htm <input type="text" name="username"> <input type="text" name="sex"> <input type="button" value="Post" onclick="Post()"> <script> function Post() { var url = "Read.htm?username=" + escape(document.all.username.value); url += "&sex=" + escape(document.all.sex.value); location.href = url; } </script> ``` 在这个例子中，`Post()` 函数将获取到的用户名和性别值用 `escape()` 函数编码后添加到URL中，然后重定向到 `Read.htm`。 ```html Read.htm <script> var url = location.search; var Request = new Object(); if (url.indexOf("?") != -1) { var str = url.substr(1); // 去掉问号 var strs = str.split("&"); for (var i = 0; i < strs.length; i++) { Request[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]); } } alert(Request["username"]); alert(Request["sex"]); </script> ``` 在 `Read.htm` 页面，JavaScript 会解析URL中的查询字符串，通过 `split()` 函数提取键值对，并用 `unescape()` 解码，然后存储在 `Request` 对象中，以便于访问。 二、Cookie传值 另一种方式是通过Cookie传递数据。Cookie是在用户浏览器中存储的小型文本文件，可以用来在多个页面间保存信息。创建一个Cookie，然后在目标页面读取它。创建Cookie的代码可能如下： ```javascript function setCookie(name, value, days) { var expires = ""; if (days) { var date = new Date(); date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000); expires = "; expires=" + date.toUTCString(); } document.cookie = name + "=" + (value || "") + expires + "; path=/"; } function getCookie(name) { var cookieArr = document.cookie.split(";"); for (var i = 0; i < cookieArr.length; i++) { var cookiePair = cookieArr[i].split("="); if (name === cookiePair[0].trim()) { return decodeURIComponent(cookiePair[1]); } } return null; } ``` 设置完Cookie后，可以在新页面使用 `getCookie()` 函数获取值。 三、localStorage或sessionStorage 现代浏览器支持HTML5的localStorage和sessionStorage，它们提供了在浏览器中存储键值对的能力。与Cookie相比，它们更安全，且存储量更大。例如，存储数据： ```javascript localStorage.setItem("username", document.all.username.value); localStorage.setItem("sex", document.all.sex.value); ``` 然后在另一个页面读取： ```javascript var username = localStorage.getItem("username"); var sex = localStorage.getItem("sex"); ``` localStorage的数据不会随浏览器关闭而清除，而sessionStorage的数据则会在浏览器会话结束时删除。 这三种方法各有优缺点，URL传值简单但不适用于大量数据，Cookie适合跨域传递但大小有限制，而localStorage和sessionStorage则提供更大的存储空间但仅限于同源策略下的页面。选择哪种方法取决于具体需求和应用场景。