HTML5本地存储Web Storage

web storage:键值对存储,容量至少为4M,不用安装任何插件,提供两种在客户端存储数据的方法 localStorage:没有时间限制的数据存储方式,可以将数据永久保存在客户端 sessionStorage:针对一个session的数据存储,即将数据保存在session对象中,当关闭浏览器后,这些数据会被删除

注意:在使用web存储前,检查浏览器是否支持localStorage和sessionStorage,IE8+,firefox,chrome,opera和safari支持web存储,IF7及更早版本不支持

web storage支持的属性与方法:

getItem(key):获取指定Key所存储得value值 key(index):返回列表中对应对应索引的Key(键)值

setItem(key,value):将value存储到key指定的字段

length:返回key/value对列表的长度
removeItem(key):从Storage中删除一个对应的键值对

clear():移除storage中所有key/value对

设置、获取key/value除了使用setItem()、getItem()方法外,还提供了其他方法

设置:sessionStorage.key = 'value'; || localStorage.key = 'value'; 获

取:sessionStorage.key; || localStorage.key;

eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5本地存储</title>
    <style>
        textarea{
            width:400px;
            height: 200px;
            border: 1px solid #333333;
        }
    </style>
</head>
<body>
<h2>简单的web存储留言板</h2>
<textarea id="txtarea"></textarea><br/>
<input type="button" class="btn" onclick="addInfo()" value="留言"/>
<input type="button" class="btn" onclick="clearInfo()" value="清除留言"/>
<hr/>
<textarea id="showarea" readonly></textarea>
<script>
    if(typeof (Storage) !=='undefined'){
        console.log('web storage');
    }else{
        console.log('no');
    }
    //添加留言信息
    function addInfo(){
        var txtarea = document.getElementById('txtarea');
        var lStorage = window.localStorage; //获取localStorage对象
        //判断对象中是否存在myBoar这个键
        if(lStorage.myBoar){
            var date = new Date();
            //获取原先myBoar键对应的值再加上文本框中所输入的留言信息
            lStorage.myBoar += txtarea.value + '\n发表时间:'+date.toLocaleString()+'\n';
        }else {
            var date = new Date();
            lStorage.myBoar = txtarea.value + '\n发表时间:'+date.toLocaleString()+'\n';
        }
        show();
    }
    //清除留言信息
    function  clearInfo() {
        window.localStorage.removeItem('myBoar');
        show();
    }
    //取出键所对应的信息显示在文本框中
    function show(){
        var lStorage = window.localStorage;
        var showarea = document.getElementById('showarea');
        if(lStorage.myBoar){
            showarea.value = lStorage.getItem('myBoar');
        }else{
            showarea.value = '还没有留言';
        }
    }
</script>

</body>
</html>

注意:seesionStorage与localStorage的使用方法一样,只是localStorage可以永久保存,而seesionStorage在关闭浏览器后就删除了

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

LLL_LH

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值