本篇文章将主要介绍几种数据存储的方法，不要事事都想着数据库，数据库那么神圣的东西建议还是不要大材小用，它有更重要的使命，以后再讨论。
先从页面跳转传值讲起，那么问题来了，就是我从这个页面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>
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>
二、通过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>
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>
简直完美，perfect...
上面以两个简单的demo提现了前端存取数据的方法，那么sessionStorage究竟还有哪些用法？它和localStorage、cookie究竟有什么区别？localStorage、cookie又该怎么用？继续往下看......
https://www.cnblogs.com/ranyonsue/p/6402687.html
三、漫谈cookie、localStorage、sessionStorage
1.cookie