HTML5本地存储Web Storage

最新推荐文章于 2020-12-05 11:36:13 发布

LLL_LH

最新推荐文章于 2020-12-05 11:36:13 发布

阅读量214

点赞数

分类专栏：其它

本文链接：https://blog.csdn.net/LLL_liuhui/article/details/88260771

版权

其它专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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在关闭浏览器后就删除了