8、localstorage的应用 - HTML5&CSS3.0基础部分-xyphf

于 2017-07-04 11:33:12 发布
阅读量396 收藏
点赞数
分类专栏： HTML5 文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/xyphf/article/details/74300575
版权

localstorage1——字符设置获取

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>

//设置
localStorage.a = 12;

//获取
alert(localStorage.a);

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

localStorage.a = "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>

localStorage.setItem("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>

localStorage.a = "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>
localStorage.a = "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>
window.onload = 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>
window.onload = function(){
    var oText = document.querySelector("input[type=text]");
    var oBtn = document.querySelector("input[type=button]");

    oBtn.onclick = function(){
        localstorage.msg = oText.value;
    };
};
</script>
</head>
<body>

</body>
</html>

localstorage10——同步输入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>localstorage同步输入</title>
<script>
window.onload = 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>
window.onload = function(){
    var oText = document.querySelector('input[type=text]');

    window.onstorage = function(ev){
        oText.value = localStorage[ev.key];
    };
};
</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>
window.onload = 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){
        window.onstorage = fn;
    }

};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值