HTML5 ---localStorage储存实例

<!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>

posted @ 2016-11-18 10:34 神来钥匙-陈诗友阅读(586) 评论(0) 编辑收藏举报

刷新页面返回顶部

神来芒果

HTML5 ---localStorage储存实例

公告