首页 > 云开发 > HTML5 > 正文

后台-系统设置-扩展变量-手机广告位-内容正文顶部

html5知识点补充—客户端存储

HTML5

sessionStorge和localStorage

会话存储(sessionStorage)和本地存储(localStorage)在实现方式上十分相似,而仅仅在作用域和数据持久化方面有所区别。浏览器为每种存储类型都提供了一种存储接口:sessionStoragelocalStorage,它们都能使用键值对列表存储数据。你可以为一个键设置一个值,然后通过改建访问相应的值。两种存储对象都提供了用于设置值、获取值、删除键、获取键列表特定位置和清除所有键值对的方法。每种存储对象类型的方法和属性都是相同的。这是因为,它们都是从Web Storage规范定义的Storage接口继承而来。

setItem(key,value): 设置由参数定义的键值对。如果该键已经存在,那么对应值更新为参数中的值。

getItem(key): 获取参数中键对应的键值对

removeItem(key): 删除参数中对应的键值对

key(n): 返回索引对应的键名

clear: 删除所有的键值对

length: 提供存储列表中键值对的数量

PS:setItem中的value的类型为字符串,也就是说,如果你需要存储数字,必须在存储时将其视为字符串,然后在访问时将其转换回正确的数据格式。

使用示例如下所示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>web storge</title>
</head>
<body>
<script>
    function init() {
        var divVisits = document.getElementById('divVisits');

        if (window.sessionStorage) {
            var visits;

            if (sessionStorage.visits) {
                visits = parseInt(sessionStorage.getItem('visits'));
                visits++;
            } else {
                visits = 1;
            }

            sessionStorage.setItem('visits', visits);

            divVisits.innerHTML = 'Session page visits: ' + visits;
        } else {
            divVisits = 'Window sessiongStorage is not avaiable';
        }


    }

    window.addEventListener('load', init, false);
    
</script>
<div id="divVisits"></div>
</body>
</html>
捕获本地存储事件

事件可以是因为一个新键值对的插入、更新或者删除事件而触发。页面可以创建监听这些事件的相应函数,在接受到相应事件进行处理。storageEvent事件包含了帮助决定如何处理的属性。

属性 类型 目的
key DOMString 发生变化的键
oldValue DOMString 旧值
newValue DOMString 新值
url DOMString 发生变化的页面URL
storageArea Storage 更新发生的存储区域
文章来源:segmentfault,作者:两仪。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:william.shi#ucloud.cn(邮箱中#请改为@)进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
后台-系统设置-扩展变量-手机广告位-内容正文底部

推荐文章

热门标签

    热门文章 最新文章 文章云

站内导航

全站搜索