欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

HTML5 Web存储 页面间进行传值

程序员文章站 2022-06-27 14:14:49
在实际使用过程中,经常会遇到需要在页面间进行传值的情况, 使用HTML5 Web存储(localStorage 和 sessionStorage方法)会更加安全与快速 ......

在实际使用过程中,经常会遇到需要在页面间进行传值的情况,最初设想一定需要后端才能进行数据的存储和读取,或者在本地使用一个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