我要评论在实际使用过程中，经常会遇到需要在页面间进行传值的情况，最初设想一定需要后端才能进行数据的存储和读取，或者在本地使用一个cookie进行保存，直到了解到html5 web存储
使用html5的新特性可以在本地存储用户的浏览数据。相比之前的cookie，web 存储更加的安全与快速. 这些数据不会被保存在服务器上，数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能.
数据以“键/值”对存在, web网页的数据只允许该网页访问使用
方法： localstorage 和 sessionstorage （客户端存储）
- localstorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
- sessionstorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
在使用 web 存储前,检查浏览器是否支持 localstorage 和sessionstorage:
if(typeof(storage)!=="undefined")
{
// 支持 localstorage sessionstorage 对象
// 事件函数
} else {
// 不支持 web 存储。
}
（只要不是老掉牙的ie，基本没问题的，现在的浏览器都支持h5的）
写的一个小demo，用于理解：在第一个页面中输入，跳转后第二个页面上读取数据
<form>
<fieldset id="submit">
<input type="text" id="one" name="one"></select>
<input type="text" id="two" name="two">
<input type="button" value="submit" onclick="submit()">
</fieldset>
</form>
function submit(){
if(document.getelementbyid("submit").value!=""){
var key=document.getelementbyid("submit");
localstorage.name = key.value;
location.href = '';
}else{
alert("error");
}
}
//中
<script>
//读取保存结果
var searchkey = localstorage["name"];
</script>
另菜鸟教程上有一个demo，个人感觉很不错：
<div>
<label for="sitename">网站名(key)：</label>
<input type="text" id="sitename" name="sitename" class="text"/>
<label for="siteurl">网址(value)：</label>
<input type="text" id="siteurl" name="siteurl"/>
<input type="button" onclick="save()" value="新增记录"/>
<label for="search_site">输入网站名：</label>
<input type="text" id="search_site" name="search_site"/>
<input type="button" onclick="find()" value="查找网站"/>
<p id="find_result"><br/></p>
</div>
//保存数据
function save(){
var siteurl = document.getelementbyid("siteurl").value;
var sitename = document.getelementbyid("sitename").value;
localstorage.setitem(sitename, siteurl);
alert("添加成功");
}
//查找数据
function find(){
var search_site = document.getelementbyid("search_site").value;
var sitename = localstorage.getitem(search_site);
var find_result = document.getelementbyid("find_result");
find_result.innerhtml = search_site + "的网址是：" + sitename;
}
参考链接：
菜鸟教程：http://www.runoob.com/html/html5-webstorage.html
w3school: http://www.w3school.com.cn/html5/html_5_webstorage.asp
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论