浏览器缓存机制(四)——sessionStorage和localStorage
来源:互联网 发布:电话亭女孩 知乎 编辑:程序博客网 时间:2024/06/07 01:31
一.Web Storage
Web Storage是HTML5提出的本地存储机制,主要目的是克服cookie的一些限制,当数据需要被严格控制在客户端上时,无需持续的将数据发回服务器。
优点:
- 大量数据的存储(也有限制,因浏览器而异,每个来源2.5M/5M)
- 数据不是由每个服务器请求传递的,而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。
- 跨会话
缺陷:
- 因为WebStorage API属于一种同步API,所以在保存大数据量或保存对象时的性能不高。
- 因为缺乏索引,所以在针对大数据量或对象进行搜索时的性能不高。
- 因为目前主流浏览器均只支持在WebStorage中存储字符串数据,所以当保存对象时必须先将其转换为JSON字符串后进行保存,当获取对象时必须先将取出的字符串后将其还原为对象,所以导致针对对象进行存取操作时的性能不高。
分类:
Web Storage提供了两种在客户端存储数据的方法:
- localStorage - 没有时间限制的数据存储
- sessionStorage - 针对一个 session 的数据存储
浏览器兼容性:
localStorage, sessionStorage都是浏览器的对象,绝大部分现代浏览器中已经得到了很好的支持,但是既然是绝大部分,就必须照顾那些还不支持这两个对象的浏览器。为了检测浏览器是否支持这两个对象,我们可以简单的用下面的代码来检测:
function storageSupport() { try { return 'localStorage' in window && window['localStorage'] !== null; } catch (e) { return false; } }
使用方式:
注:localStorage, sessionStorage都是Storage类型的实例,Storage类型只能存储字符串,非字符串的数据在存储前会被转化成字符串。
二.sessionStorage
sessionStorage 是个全局对象,它维护着在页面会话(page session)期间有效的存储空间。只要浏览器开着,页面会话周期就会一直持续。
当页面重新载入(reload)或者被恢复(restores)时,页面会话也是一直存在。
每在新标签或者新窗口中打开一个新页面,都会初始化一个新的会话。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title></head><body> <script> window.onload=function () { sessionStorage.setItem("myname","zhoujie"); alert(sessionStorage.getItem("myname")) } </script></body></html>
当我在浏览器打开时,会弹出”zhoujie”,数据会在本地进行存储,
有图有真相:
接下来我将sessionStorage.setItem(“myname”,”zhoujie”);注释掉,再刷新页面,还是会弹出正确的myname。
但在我注释掉设置语句后,再打开一个新窗口,或者重新关掉浏览器重新打开时,数据就会被清除。
二.localStorage
localStorage是跨多个窗口,且持续范围可超过当前会话;意味着当浏览器关闭再重新打开,数据依然是可用的。数据保留到通过js删除或用户清除浏览器缓存。
上代码:
<body> <script> window.onload=function () { localStorage.setItem("myname","zhoujie"); alert(localStorage.getItem("myname")) } </script></body>
这时我打开浏览器,会弹出”zhoujie”。看看本地的存储情况:
接着我注释掉设置代码,关掉浏览器重新打开,还是会弹出“zhoujie”,并且数据依然在。
- 浏览器缓存机制(四)——sessionStorage和localStorage
- 浏览器本地缓存 localStorage sessionStorage
- HTML5——sessionStorage和localStorage
- 客户端存储——localStorage和sessionStorage
- 【Angular】——localStorage和sessionStorage
- html5 web缓存localStorage和sessionStorage
- HTML5——Web存储API,sessionStorage和localStorage
- JavaScript强化教程——sessionStorage和localStorage
- sessionStorage 和localStorage 区别
- localstorage和sessionstorage
- sessionStorage和localStorage
- sessionStorage和localStorage区别
- localStorage和sessionStorage
- sessionStorage和localStorage
- sessionstorage,localstorage和cookie
- sessionStorage和localStorage
- HTML5 sessionStorage和localStorage
- sessionStorage和localStorage
- python爬虫神器PyQuery的使用方法
- vue.js学习(三)
- 作为一个penetration tester必知必读的好书推荐
- Linux系统内核UDP丢包原因分析
- 嵌入式网络通讯详解
- 浏览器缓存机制(四)——sessionStorage和localStorage
- 排序算法-插入排序
- sort命令k选项
- Python中MySQLdb的事务处理
- ajax错误处理 net::ERR_CONNECTION_REFUSED
- 水仙花数
- OMXplayer
- UDP协议疑难杂症全景解析
- MySQL命令行导出导入数据库