H5保存并读取临时数据

1：

错误：我运行的时候没有显示出数据

=============

在H5,APP中，本地存储主要用于客户端存储用户名等简单的用户信息

1：

分析

web Storage页面存储是H5为存储数据在客户端提供的一项重要功能，因为web Storage API可以区分会话数据和长期数据。

因此相应的API可以分为2两种类型

1：

sessionStorage：保存会话数据

2：

sessionStorage：在客户端长期保存数据

3：

使用sessionStorage对象保存数据的方法

：

调用setItem()方法

格式如下：

sessionStorage.setItem(key,value);

参数key表示被保存内容的键名

参数value表示被保存内容的键值

--

成功设置键名后不再允许修改，也不能重复，如果有重复，他就会取代原来的。

2：

读取被保存的数据getItem()方法

格式如下：

sessionStorage.getItem(key);

其中参数key表示设置保存时被保存内容的键名，该方法将返回一个指定键名对应的键值，如果不存在则返回一个null值

---------

案例：

创建一个文本框，和一个读取按钮，点击按钮，读取文本框的内容并且显示在页面

HTML代码

<fieldset>
<legend>读取数据</legend>

    <input name="txtName" type="text" class="inputtxt" onChange="txtName_change(this);"size="30px">

    <input name="btnGetValue" type="button" class="inputbtn" onclick="btnGetValue_click();" value="读取">

    <p id="pStatus">5555</p>

</fieldset>

======================

js代码

<script type="text/javascript">

//获取id的函数

function $$(id){
return document.getElementById(id);
}

//输入文本框内容时调用的函数

function txtName_change(v){
var strName=v.value;//获取v的值,就是文本输入的值
sessionStroage.setItem("strName",strName);//键名和键值
$$("pStatus").style.display="block";
//$$("pStatus").innerHTML=sessionStorage.getItem("strName");//插入数据的时候，读取数据
$$("pStatus").innerHTML=sessionStorage.setItem("strName");
}

//点击读取按钮时调用的函数

function btnGetVaule_click(){
$$("pStatus").style.display="block";//会显示文本的样式
$$("pStatus").innerHTML=sessionStorage.getItem("strName");//,通过key值获取数据
}

</script>

==========

css代码

<style type="text/css">

.inputbtn{
border:#ccc 1px solid;
background-color:#eee;
line-height:18px;
font-size:12px;
}

.inputtxt{
border:#ccc 1px solid;
line-height:18px;
font-size:12px;
padding-left:3px;
}

fieldset{
padding:10px;
width:285px;
float:left;
}

#pStatus{
display:none;
border:#ccc 1px solid;
width:158px;
background-color:#eee;
padding:6px 12px 6px 12px;
margin-left:2px;
}

</style>

===========

解决bug：