Html5 Web 存储未在第二页中显示数据

Html5 web storage not displaying data in a second page

本文关键字：二页 数据 显示 存储 Web Html5      更新时间：2023-09-26

我正在使用网络存储来保存数据。当我通过表单获取数据并将其保存在变量（在本例中为"一"）并尝试在同一页面中显示时，它会正确执行此操作。但是当我导入相同的".js"文件并尝试在不同的页面中显示它时，它不起作用。如何使用网络存储来检索不同页面中的数据？另外，我不想使用查询字符串！

第一页：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="webstorageAPI.js"></script>
<link href="webstorageAPI.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<section id="leftbox">
    	<section id="leftbox">
    	<form action="seconddisplayfile.html" method="post">
            <p>(key) One: <input type="text" id="one"  /></p>
            <p>(value)Two:<textarea id="two"></textarea></p>
            <p><input type="submit" id="button" value="Save"  /></p>
        </form>
    </section>
    <section id="rightbox">
    	Nothing yet !
    </section>
    </section>
    
</body>
</html>

第二页：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="webstorageAPI.js"></script>
<link href="webstorageAPI.css" rel="stylesheet" type="text/css" />
</head>
<body>
	
    <section id="wbox">
    	Nothing yet!
    </section>
</body>
</html>

Javascript代码：

// JavaScript Document
function doFirst(){
	var button = document.getElementById("button");
	
	button.addEventListener('click',save,false);
}
function save(){
	var one = document.getElementById("one").value;		//but only contents  is to be taken not label n all
	var two = document.getElementById('two').value;	
	 localStorage.setItem("one",two);		//Store in key-value pair. Anytime you use this you use if by addressing the variable ie key name.
	
	//Retriveing data n displaying stored data
	display(one);	//now u hav stored two so its time to use one
}
function display(one){
	var rightbox = document.getElementById('rightbox');	//refer right box
	
	var two= localStorage.getItem("one");		//Get in key-value pair
	rightbox.innerHTML= "Name of variable:"+one+"<br/>Value:"+two;
	
	/*----Second page display-----*/
	var wbox = document.getElementById("wbox");
	wbox.innerHTML= "Name of variable:"+one+"<br/>Value:"+two;*/
}
window.addEventListener('load',doFirst,false);

@charset "utf-8";
/* CSS Document */
#leftbox{
	float:left;
	padding:20px;
	border:3px solid #F20B84;
}
#rightbox{
	float:left;
	width:250px;
	margin-left:20px;
	padding:20px;
	border:3px solid #8E1783;
}

您的第二页不包含任何 id rightbox .so 的元素

var rightbox = document.getElementById('rightbox');

将返回null .并且当尝试设置innerHTML rightbox 的属性时，js 会抛出 

Uncaught TypeError: Cannot read property 'innerHTML' of null

因此，请将display更改为

function display(one){
    var rightbox = document.getElementById('rightbox'); //refer right box
    var two= localStorage.getItem("one");       //Get in key-value pair
   if(rightbox)
      rightbox.innerHTML= "Name of variable:"+one+"<br/>Value:"+two;
   /*----Second page display-----*/
   var wbox = document.getElementById("wbox");
   wbox.innerHTML= "Name of variable:"+one+"<br/>Value:"+two;*/
}

您必须在第二页中调用display。

相关文章：