页面传值及数据存储的几种方法

本篇文章将主要介绍几种数据存储的方法，不要事事都想着数据库，数据库那么神圣的东西建议还是不要大材小用，它有更重要的使命，以后再讨论。

先从页面跳转传值讲起，那么问题来了，就是我从这个页面a跳转到页面b的时候带着所点击div的所对应的属性值一起传过去，用什么样的方法呢，首先想到通过url带参传输过去，显然是可以的。第二种方法就是存在一些存储机制当中，就以sessionStorage为例，那么sessionStorage怎么使用呢？还有其他的什么存储机制，分别有什么不同，用法又是如何？他们的使用场景又是怎样？别急，且听我慢慢道来。

一、通过url带参传输

1.保存数据页面（urlData_set.html）

<!DOCTYPE HTML> 
<html> 
    <head> 
        <meta charset="utf-8"> 
        <title>url存值跳转</title> 
    </head> 
     
    <body> 
        <input id="msg" type="text"/>
        <input id="setData" type="button" value="保存数据"/>
    </body> 
</html>
<script type="text/javascript">
    window.onload = function() 
    { 
        var msg = document.getElementById("msg"); 
        var setData = document.getElementById("setData"); 
         
        setData.onclick = function()//存入数据 
        { 
            if(msg.value) 
            { 
                alert("信息已保存到url中"); 
                location.href="urlData_get.html?"+"txt="+encodeURI(msg.value);
            } 
            else 
            { 
                alert("信息不能为空"); 
            } 
        } 
    }  
</script>

View Code

　　2.获取数据页面（urlData_get.html)

<!DOCTYPE HTML> 
<html> 
    <head> 
        <meta charset="utf-8"> 
        <title>url存值跳转</title> 
    </head> 
     
    <body> 
        <input id="getData" type="button" value="获取数据"/> 
    </body> 
</html>
<script type="text/javascript"> 
    window.onload = function() 
    { 
        var getData = document.getElementById("getData"); 
        
        getData.onclick = function()//获取数据 
        { 
            var loc = location.href;
            var n1 = loc.length;//地址的总长度
            var n2 = loc.indexOf("=");//取得=号的位置
            var msg = decodeURI(loc.substr(n2+1, n1-n2));//从=号后面的内容 
            if(msg) 
            { 
                alert("url中的值为：" + msg);
                //document.write(msg) 
            } 
            else 
            { 
                alert("url无参数值！"); 
            } 
        } 
    } 
</script>

View Code

二、通过sessionStorage存储数据

　　1.保存数据（sessionStorage_set.html）

<!DOCTYPE HTML> 
<html> 
    <head> 
        <meta charset="utf-8"> 
        <title>本地存储SessionStorage</title> 
    </head> 
     
    <body> 
        <input id="msg" type="text"/> 
        <input id="setData" type="button" value="保存数据"/> 
    </body> 
</html>
<script type="text/javascript"> 
    window.onload = function() 
    { 
        var msg = document.getElementById("msg"); 
        var setData = document.getElementById("setData"); 
         
        setData.onclick = function()//存入数据 
        { 
            if(msg.value) 
            { 
                sessionStorage.setItem("data", msg.value); 
                alert("信息已保存到data字段中"); 
                window.location.href="sessionStorage_get.html"
            } 
            else 
            { 
                alert("信息不能为空"); 
            } 
        } 
    } 
</script>

View Code

　　2.获取数据（sessionStorage_get.html）

<!DOCTYPE HTML> 
<html> 
    <head> 
        <meta charset="utf-8"> 
        <title>本地存储SessionStorage</title> 
    </head> 
     
    <body> 
        <input id="getData" type="button" value="获取数据"/> 
    </body> 
</html>
<script type="text/javascript"> 
    window.onload = function() 
    { 
        var getData = document.getElementById("getData"); 
        
        getData.onclick = function()//获取数据 
        { 
            var msg = sessionStorage.getItem("data"); 
            if(msg) 
            { 
                alert("data字段中的值为：" + msg); 
            } 
            else 
            { 
                alert("data字段无值！"); 
            } 
        } 
    } 
</script>

View Code

简直完美，perfect...

上面以两个简单的demo提现了前端存取数据的方法，那么sessionStorage究竟还有哪些用法？它和localStorage、cookie究竟有什么区别？localStorage、cookie又该怎么用？继续往下看......

https://www.cnblogs.com/ranyonsue/p/6402687.html

三、漫谈cookie、localStorage、sessionStorage

　　1.cookie