本篇文章将主要介绍几种数据存储的方法,不要事事都想着数据库,数据库那么神圣的东西建议还是不要大材小用,它有更重要的使命,以后再讨论。
先从页面跳转传值讲起,那么问题来了,就是我从这个页面a跳转到页面b的时候带着所点击div的所对应的属性值一起传过去,用什么样的方法呢,首先想到通过url带参传输过去,显然是可以的。第二种方法就是存在一些存储机制当中,就以sessionStorage为例,那么sessionStorage怎么使用呢?还有其他的什么存储机制,分别有什么不同,用法又是如何?他们的使用场景又是怎样?别急,且听我慢慢道来。
一、通过url带参传输
1.保存数据页面 (urlData_set.html)
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!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>
2.获取数据页面(urlData_get.html)
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!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>
二、通过sessionStorage存储数据
1.保存数据(sessionStorage_set.html)
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!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>
2.获取数据(sessionStorage_get.html)
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!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>
简直完美,perfect...
上面以两个简单的demo提现了前端存取数据的方法,那么sessionStorage究竟还有哪些用法?它和localStorage、cookie究竟有什么区别?localStorage、cookie又该怎么用?继续往下看......
https://www.cnblogs.com/ranyonsue/p/6402687.html
三、漫谈cookie、localStorage、sessionStorage
1.cookie