HTML5 Web存储 页面间进行传值
2018-10-13 06:28:26来源:博客园 阅读 ()
在实际使用过程中,经常会遇到需要在页面间进行传值的情况,最初设想一定需要后端才能进行数据的存储和读取,或者在本地使用一个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 = '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
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- 转行Web前端工程师要掌握的学习知识汇总 2020-06-10
- HTML基础教程_1 2020-06-09
- 转行WEB前端 感觉很迷茫 该怎么做? 2020-06-09
- 毕业生想学习web前端开发,有什么好的发展方向吗? 2020-06-09
- 2020年Web前端开发工程师市场怎么样?学会什么技术才能拿到 2020-06-06
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash