HTML5 ---localStorage儲存實例

時間 2019-11-20

標籤 html5 html localstorage 儲存實例欄目 HTML5 简体版

原文原文鏈接

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> /* *原理： * 存儲到localStorage * 考慮到存儲方式以下 * localStorage.setItem(key,value); * 要存儲到數據有幾個數據包在一塊兒，恩慈要綁定起來，，可使用對象存儲起來，如： * var obj = new Object(); obj["id"] = id; obj["name"] = name; obj["price"] = price; * //對象轉字符串 var strs = JSON.stringify(obj); * * * //存儲 key value localStorage.setItem(id,strs); * * * * */ function dats(id,name,price) { console.log("id:"+id+"name:"+name+"price:"+price); var obj = new Object(); obj["id"] = id; obj["name"] = name; obj["price"] = price; // for (var key in obj) // { // console.log(obj["name"]); // } //對象轉字符串 var strs = JSON.stringify(obj); // console.log(strs); //存儲 key value localStorage.setItem(id,strs); } function updata() { // console.log("updata"); //獲取存儲數據 var data = localStorage.getItem(12); // console.log(data); //字符串轉對象 var dataObj = JSON.parse(data); console.log(dataObj["id"]); } function removeItemdata(key) { // console.log("removeItemdata"); localStorage.removeItem(key); } function Cleardata() { console.log("Cleardata"); //獲取存儲長度 var dataLen = localStorage.length; for (var i = 0 ; i < dataLen ; i++) { //獲取key var key = localStorage.key(i); //取出對應key到數據 updata(key); } } </script> </head> <body> <button onclick="dats(12,'dd',33)" style="height: 30px;width: 50%;text-align: center;">save</button> <button onclick="updata()" style="height: 30px;width: 50%;text-align: center;">upData</button> <button onclick="removeItemdata(12)" style="height: 30px;width: 50%;text-align: center;">removeItem</button> <button onclick="Cleardata()" style="height: 30px;width: 50%;text-align: center;">Clear</button> <input id="txt" type="text" name="name" style="height: 40px;width: 95%;padding: 5px;"/> </body> </html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。