大佬教程收集整理的这篇文章主要介绍了html5知识点补充—客户端存储,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
会话存储(sessionStoragE)和本地存储(localStoragE)在实现方式上十分相似,而仅仅在作用域和数据持久化方面有所区别。浏览器为每种存储类型都提供了一种存储接口:sessionStorage
和localStorage
,它们都能使用键值对列表存储数据。你可以为一个键设置一个值,然后通过改建访问相应的值。两种存储对象都提供了用于设置值、获取值、删除键、获取键列表特定位置和清除所有键值对的方法。每种存储对象类型的方法和属性都是相同的。这是因为,它们都是从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 | 更新发生的存储区域 |
以上是大佬教程为你收集整理的html5知识点补充—客户端存储全部内容,希望文章能够帮你解决html5知识点补充—客户端存储所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。