localstorage1——字符设置获取
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>//设置
localStorage.a = 12;
//获取</script>
</body>
</html>
localstorage2——json的设置获取
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>localStorage json设置获取运算</title>
<script>//设置
localStorage.json = '{"a":12,"b":5}';//[Object Object]
//获取
// var json = eval("("+localStorage.json+")");
// alert(json.a + 8);
//或者
alert(JSON.parse(localStorage.json).a + 8);
/*
在JSON.parse(localStorage.json).a解析下，json必须遵循标准模式
即 {"a":12,"b":5}
*/</script>
</head>
<body>
</body>
</html>
localstorage3——对象转字符串、字符串转对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>var json = {a:12,b:5};
json.c = "c";
//设置
//obj --> string
localStorage.json = JSON.stringify(json);
//获取
//string --> obj
alert(JSON.parse(localStorage.json).a + 8);
</script>
</head>
<body>
</body>
</html>
localstorage4——批量删除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>localstorage批量删除</title>
<script>"a";
localStorage.b = "b";
localStorage.c = "c";
localStorage.d = "d";
localStorage.clear();
</script>
</head>
<body>
</body>
</html>
localstorage5——设置属性名.值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>设置属性名、值</title>
<script>"a","aaa");
alert(localStorage.getItem("a"));
/*
设置
localStorage.属性名 = 值;
localStorage.setItem(属性名,值);
获取
localStorage.属性名
localStorage.getItem(属性名);
删除
delete localStorage.属性名;
localStorage.removeItem("属性名");
批量删除
localStorage.clear();
*/</script>
</head>
<body>
</body>
</html>
localstorage6——不遵循配对原则
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>"a";
alert(localStorage.getItem("a"));
localStorage.setItem("a","aaa");
alert(localStorage.a);
</script>
</head>
<body>
</body>
</html>
localstorage7——删除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>删除</title>
<script>"a";
//detete localStorage.a;
localStorage.removeItem("a");
</script>
</head>
<body>
</body>
</html>
localstorage8——应用_你还可以输入多少字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>function(){
var oSpan = document.getElementById("s1");
var oText = document.getElementById("txt1");
var total = 5;
var msg = localStorage.msg;
oText.oninput = function(){
localStorage.msg = this.value;
var len = total - this.value.length;
if (len >= 0) {
oSpan.innerHTML = "你还可以输入<strong>"+len+"</strong>个字！";
} else {
oSpan.innerHTML = "你已超出<strong style='color:red;'>"+Math.abs(len)+"</strong>"</script>
</head>
<body>
<span id="s1">你还可以输入<strong>5</strong></span><br<br
<textarea id="txt1" style="width:500;height:300px"></textarea>
</body>
</html>
localstorage9——事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>localstorage</title>
<script>function(){
var oText = document.querySelector("input[type=text]");
var oBtn = document.querySelector("input[type=button]");
oBtn.onclick = function(){</script>
</head>
<body>
</body>
</html>
localstorage10——同步输入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>localstorage同步输入</title>
<script>function(){
var oText = document.querySelector('input[type=text]');
oText.oninput = function(){
localstorage.msg = this.value;
};
};
</script>
</head>
<body>
<input type="text" value=""
</body>
</html>
localstorage11——同步输入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>同步输入</title>
<script>function(){
var oText = document.querySelector('input[type=text]');
window.onstorage = function(ev){</script>
</head>
<body>
<input type="text" value=""
</body>
</html>
localstorage12——拖拽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>本地储存localStorage拖拽</title>
<style>#div1{position:absolute;left:0;top:0;width:200px;height:200px;background:red;}</style>
<script>function(){
var oDiv = document.getElementById('div1');
oDiv.onmousedown = function(ev){
var oEvt = ev||event;
var disX = oEvt.clientX - oDiv.offsetLeft;
var disY = oEvt.clientY - oDiv.offsetTop;
document.onmousemove = function(ev){
var oEvt = ev || event;
var l = oEvt.clientX - disX;
var t = oEvt.clientY - disY;
oDiv.style.left = l + "px";
oDiv.style.top = t + "px";
localStorage.pos = JSON.stringify({left:l,top:t});
};
document.onmouseup = function(){
document.onmousemove = null;
document.mouseup = null;
};
return false;
};
addEvent(function(){
var pos = JSON.parse(localStorage.pos);
oDiv.style.left = pos.left + "px";
oDiv.style.top = pos.top + "px";
});
function addEvent(fn){</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
