摘要：用于临时保存同一窗口或标签页的数据，在关闭窗口或标签页之后将会删除这些数据。在使用存储前检查浏览器是否支持和支持对象事件函数不支持存储。
在实际使用过程中，经常会遇到需要在页面间进行传值的情况，最初设想一定需要后端才能进行数据的存储和读取，或者在本地使用一个cookie进行保存，直到了解到HTML5 Web存储
使用HTML5的新特性可以在本地存储用户的浏览数据。相比之前的cookie，Web 存储更加的安全与快速. 这些数据不会被保存在服务器上，数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能.
数据以“键/值”对存在, web网页的数据只允许该网页访问使用
方法： 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中
另菜鸟教程上有一个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
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/1706.html
摘要：在中由于业务的需要我们往往要在诸多的页面间，组件之间做一些参数的传递与管理在这里我总结了几大经过验证，稳定好用的方式给大家导航传值推荐指数适用范围相邻页面间传值兼容性原理为页面的上挂载了对象可用来做路由跳转，在做页面跳转时可以携带参数回调方 在React Native 中由于业务的需要, 我们往往要在诸多的页面间，组件之间做一些参数的传递与管理, 在这里我总结了几大经过验证，稳定好用的...
摘要：三底部选项卡切换页面底部选项卡的切换，可以说是的标志之一。两种模式的显示效果差不多，如下图可见两种模式的区别顾名思义，模式是将所有子页面的内容，分别放置到主页不同的中，当我们点击主页的不同选项卡时，切换不同的显示。 概 述 JRedu 在上一篇博客中，我们学习了如何使用Hbuilder创建一个APP，同时如何使用MUI搭建属于自己的第一款APP，没有学习的同学可以戳链接学习： http...
摘要：事实上，浏览器内部的运行机制是，先将通信内容串行化，然后把串行化后的字符串发给子线程，后者再将它还原。当一个的文档列表中的任何一个对象都是处于完全活动状态的时候，这个会被称之为需要激活线程。 浏览器中的Web Worker 背景介绍 我们都知道JavaScript这个语言在执行的时候是采用单线程进行执行的，也就是说在同一时间只能做一件事，这也和这门语言有很大的关系，采用同步执行的方式进...
摘要：参考通过本地储存特性检测参考利用传参在页面跳转的时候通过设置添加参数，在接收参数的页面通过获取参数字符串。发送参数的页面接收参数的页面获取中的参数获取中的参数其他参考资料页面传参终极版青峰专栏博客频道本文地址 1 ： 通过MUI封装的openWindow 方法: mui.openWindow({ url:new-page-url, id:new-page-id, ...
阅读 713·2023-04-25 19:43
阅读 3907·2021-11-30 14:52
阅读 3784·2021-11-30 14:52
阅读 3852·2021-11-29 11:00
阅读 3783·2021-11-29 11:00
阅读 3869·2021-11-29 11:00
阅读 3557·2021-11-29 11:00
阅读 6105·2021-11-29 11:00
