sessionStorage和localStorage的区别是什么
sessionStorage和localStorage的区别是:1、localStorage没有过期时间;2、sessionStorage针对一个session进行数据存储,生命周期与session相同,当用户关闭浏览器后,数据将被删除。
sessionStorage和localStorage的区别
众所周知,自从HTML 5 标准出现之后,本地化存储一度成为热搜的关键词。在HTML 5 最开始时,本地存储有两种方式:一种是web Storage,另一种是web SQL。由于web SQL的实现是基于SQLite,它更倾向于DataBase方向,且W3C官方在2011年11月宣布不在维护web SQL规范,故其API接口目前已经不属于HTML 5的范畴。因此,目前我们常讲的HTML 5本地存储,多指的是web Storage。
下面,关于WebStorage及其两种形式作具体的描述和讲解。
1、webStorage
webStorage是HTML5引入的一个重要的功能,在前端开发的过程中会经常用到,它可以在客户端本地存储数据,类似cookie,但其功能却比cookie强大的多。cookie的大小只有4Kb左右(浏览器不同,大小也不同),而webStorage的大小有5MB。其API提供的方法有以下几种:
setItem(key,value)——保存数据,以键值对的方式储存信息。
getItem(key)——获取数据,将键值传入,即可获取到对应的value值。
removeItem(key)——删除单个数据,根据键值移除对应的信息。
clear()——删除所有的数据
key(index)——获取某个索引的key
2、localStorage
localStorage的生命周期是永久性的。假若使用localStorage存储数据,即使关闭浏览器,也不会让数据消失,除非主动的去删除数据,使用的方法如上所示。localStorage有length属性,可以查看其有多少条记录的数据。使用方法如下:
var storage = null; if(window.localStorage){ //判断浏览器是否支持localStorage storage = window.localStorage; storage.setItem("name", "Rick"); //调用setItem方法,存储数据 alert(storage.getItem("name")); //调用getItem方法,弹框显示 name 为 Rick storage.removeItem("name"); //调用removeItem方法,移除数据 alert(storage.getItem("name")); //调用getItem方法,弹框显示 name 为 null }
localStorage 相对sessionStorage简单一点,需要注意的地方不是很多。
3、sessionStorage
sessionStorage 的生命周期是在浏览器关闭前。也就是说,在整个浏览器未关闭前,其数据一直都是存在的。sessionStorage也有length属性,其基本的判断和使用方法和localStorage的使用是一致的。需要注意的有以下几点:
<1> 页面刷新不会消除数据
为了验证,我准备了两个html文件,一个是index.html,另一个是text.html。至于text.html后面在详细说其起的左右。二者的html代码如下:
index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Test</title> <script> function submit() { var str = document.getElementById("text").value.trim(); setInfo(str); document.getElementById("text").value = ""; } //储存数据 function setInfo(name) { var storage = window.sessionStorage; storage.setItem('name', name); } //显示数据 function shows() { var storage = window.sessionStorage; var str = "your name is " + storage.getItem("name"); document.getElementById("text").value = str; } </script> </head> <body> <input type="button" value="Login" οnclick="submit()" /> <input type="text" name="text" id="text" /> <input type="button" value="show" οnclick="shows()" /> <a href="text.html" target="_blank">点击打开</a> </body> </html>
text.html页面如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> var storage = window.sessionStorage; alert(storage.getItem("name")); </script> </body> </html>
打开index.html页面的结果如下:
当点击show按钮后,输入框内显示 “ your name is null“,此时sessionStorage中没有存储键值为 ”name“的数据。当在文本中输入”Rick“后,点击login按钮,输入框清空的时候数据已经存储到sessionStorage中,然后再去点击show按钮,会显示”your name is Rick“。此时,点击浏览器刷新网页,再点击show按钮,输入框中显示的依旧为”your name is Rick“
<2>只有在当前页面打开的链接,才可以访sessionStorage的数据;
还记准备好的那个text.html页面吗,这个时候轮到它发挥自己的作用了。为了验证,我们接着上面的步骤,打开text.html结果如下:
可以看到,这个值为null,无法得到”name“的值。现在,关闭这个text.html页面,通过index.html页面中的点击打开链接,可以看到如下的结果:
因此,可以得知,在当前页面打开的链接,是可以访问到sessionStorage内的数据。后来又经过其他一些测试,发现当从index.html打开text.html页面后,关闭index.html,刷新text.html还可以访问到sessionStorage中的数据。只有当全部关闭index.html和从其内部打开的所有页面 或者直接关闭浏览器,才可以消除sessionStorage中的数据。
<3>使用window.open打开页面和改变localtion.href方式都可以获取到sessionStorage内部的数据
上述两种方式,经过测试,事实确实如此。感兴趣的同学,可以真实的测试下结果。关于localStorage和sessionStorage的不同之处,就不再做总结了。
总之,使用的时候,注意以上提到的几点,在使用的时候可以避免很多没必要踩的坑。
更多相关知识,请访问 PHP中文网!!
以上就是sessionStorage和localStorage的区别是什么的详细内容,更多请关注其它相关文章!
推荐阅读
-
python dict.get()和dict['key']的区别详解
-
HTMl5的存储方式sessionStorage和localStorage详解
-
微信拉黑和删除区别是什么 删除与拉黑聊天记录还在吗
-
hp compaq 笔记本产品号、序列号、产品系列的区别和各自含义
-
浅谈Java异常的Exception e中的egetMessage()和toString()方法的区别
-
insert into select和select into的使用和区别介绍
-
SQL查询中in和exists的区别分析
-
web服务器和应用服务器的区别,一文带你秒懂这两者的区别
-
webservice原理和技术(webservice和api的区别)
-
锚文本和超链接的区别,五分钟让你搞懂这两者的使用方法