寫個localStorage的小例子
阿新 • • 發佈：2019-01-24
我在搜狗問問幫別人寫程式碼的時候遇到一個小的問題，問題是這樣的，就是題主希望在別的頁面獲取到前一個頁面存在js裡面的資料，這個時候一般都會想到的是用cookie，但是其實cookie是很有侷限性的， 所以我就說其實是可以用localStorage離線快取技術的，不過我不想寫例子，所以就用之前寫的一個比較麻煩的關於localStorage的例子，裡面是有後臺的程式碼的，所以有人就誤會了，說這個技術不行啊， 總泵你一直需要後臺的技術吧，所以我今天澄清以下，這個是不要後臺的技術的，我簡單的寫一個例子，純前端。
第一個頁面：請求的頁面
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../js/jquery-1.10.2.min.js"></script> </head> <body> <!--簡單的畫一個輸入框--> <label>姓名</label> <input type="text" id="name"/> <button id="btn">登入</button> </body> <script> /*將text裡面的name取出來*/ var name = $("#name").val(); $("#btn").click(function(){ //將資料放到localStorage裡面 localStorage.setItem("name", name); //跳到寫一個頁面 window.location.href = "textlocalStorage.html" }) </script> </html>
第二個頁面：取資料
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../js/jquery-1.10.2.min.js"></script> </head> <body> <div id="name"></div> </body> <script> window.onload = function(){ //將資料取出來 var name = localStorage.getItem("name"); //將資料放到div上面 $("#name").append(name); } </script> </html>
效果是：
既然是離線，意思就是您可以一直重新整理，內容是不會丟的，但是您用這個做登入的時候，想退出的時候，是需要將資料清除的，所以這個時候是需要clear的，寫法是：
在退出的時候：
localStorage.clear();