在实际使用过程中，经常会遇到需要在页面间进行传值的情况，最初设想一定需要后端才能进行数据的存储和读取，或者在本地使用一个cookie进行保存，直到了解到HTML5 Web存储
使用HTML5的新特性可以在本地存储用户的浏览数据。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 = ‘index.html‘; ???}else{ ???????alert("error"); ???}}//index.html中<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
HTML5 Web存储 页面间进行传值
原文地址：https://www.cnblogs.com/cyuanwu/p/9782432.html