网站开发进阶(三十)HTML5--本地存储Web Storage

举报
SHQ5785 发表于 2020/12/30 01:05:18 2020/12/30
【摘要】 HTML5--本地存储Web Storage       Web Storage功能,顾名思义,就是在Web上针对客户端本地储存数据的功能,具体来说Web Storage分为两种; sessionStorage:       将数据保存在session对象中,所谓session是指用户在浏览某个网站时,从进入网站到浏览器关闭所经过的这段时间,也就是用户浏览这个网站所花费...

HTML5--本地存储Web Storage

      Web Storage功能,顾名思义,就是在Web上针对客户端本地储存数据的功能,具体来说Web Storage分为两种;

sessionStorage:

      将数据保存在session对象中,所谓session是指用户在浏览某个网站时,从进入网站到浏览器关闭所经过的这段时间,也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据。

localStorage:

      将数据保存在客户端本地的硬件设备(通常指硬盘,当然可以是其他的硬件设备)中,即是浏览器被关闭了,该数据仍然存在,下次打开浏览器访问网站时,仍然可以继续使用。

sessionStorage与localStorage区别:

      这两者的区别在于sessionStorage为临时保存,而localStorage为永久保存。即localStorage没有过期时间,只要不clear或remove,数据会一直保存。

      sessionStorage 针对一个session进行数据存储,生命周期与session相同,当用户关闭浏览器后,数据将被删除。

      接下来我们一起看一下:

      SessionStorage:

      将数据保存在session对象中,所谓session是指用户在浏览某个网站时,从进入网站到浏览器关闭所经过的这段时间会话,也就是用户浏览这个网站所花费的时间就是session的生命周期。session对象可以用来保存在这段时间内所要求保存的任何数据。

      此对象主要有两个方法:

      保存数据:sessionStorage.setItem(Key, value);

      读取数据:sessionStorage.getItem(Key);

      Key:表示你要存入的键名称,此名称可以随便命名,可以按照变量的意思来理解。

      Value:表示值,也就是你要存入Key中的值,可以按照变量赋值来理解。

      使用方法:

      保存数据:sessionStorage.setItem("website", "W3Cfuns.com");

      读取数据:sessionStorage.getItem("website");

     代码:

 


  
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="gb2312">
  5. <title>HTML5--本地存储SessionStorage</title>
  6. <script type="text/javascript">
  7. window.onload = function()
  8. {
  9. alert("当你关闭此页面或者关闭浏览器的时候,sessionStorage中保存的数据才会消失,也就是说重新打开此页面的时候,点击获取数据
  10. ,将不会显示任何数据,刷新页面无效。\r\n由此可以证明,sessionStorage的生命周期为,某个用户浏览网站时,从进入到离开的这段时间。")
  11. //首先获得body中的3个input元素
  12. var msg = document.getElementById("msg");
  13. var getData = document.getElementById("getData");
  14. var setData = document.getElementById("setData");
  15. setData.onclick = function()//存入数据
  16. {
  17. if(msg.value)
  18. {
  19. sessionStorage.setItem("data", msg.value);
  20. alert("信息已保存到data字段中");
  21. }
  22. else
  23. {
  24. alert("信息不能为空");
  25. }
  26. }
  27. getData.onclick = function()//获取数据
  28. {
  29. var msg = sessionStorage.getItem("data");
  30. if(msg)
  31. {
  32. alert("data字段中的值为:" + msg);
  33. }
  34. else
  35. {
  36. alert("data字段无值!");
  37. }
  38. }
  39. }
  40. </script>
  41. </head>
  42. <body>
  43. <input id="msg" type="text"/>
  44. <input id="setData" type="button" value="保存数据"/>
  45. <input id="getData" type="button" value="获取数据"/>
  46. </body>
  47. </html>

 

      LocalStorage:

      localStorage 默认支持的容量为5M,当调用setItem超过上限时,会触发QuotaExceededError异常。当然有些浏览器支持修改容量上限,但为了兼容其他浏览器,最好按5M的容量来使用。

      使用方法与SessionStorage如出一辙,如下代码所示:

      此对象主要有两个方法:

      保存数据:localStorage.setItem(Key, value);

      读取数据:localStorage.getItem(Key);

      Key:表示你要存入的键名称,此名称可以随便命名,可以按照变量的意思来理解。

      Value:表示值,也就是你要存入Key中的值,可以按照变量赋值来理解。

      使用方法:

      保存数据:localStorage.setItem("website", "W3Cfuns.com");

      读取数据:localStorage.getItem("website");

      案例:

 


  
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="gb2312">
  5. <title>HTML5--本地存储LocalStorage</title>
  6. <script type="text/javascript">
  7. window.onload = function()
  8. {
  9. alert("当你关闭此页面或者关闭浏览器的时候,localStorage中保存的数据不会消失,也就是说重新打开此页面的时候,点击获取数据,可以取到数据。")
  10. //首先获得body中的3个input元素
  11. var msg = document.getElementById("msg");
  12. var getData = document.getElementById("getData");
  13. var setData = document.getElementById("setData");
  14. setData.onclick = function()//存入数据
  15. {
  16. if(msg.value)
  17. {
  18. localStorage.setItem("data", msg.value);
  19. alert("信息已保存到data字段中");
  20. }
  21. else
  22. {
  23. alert("信息不能为空");
  24. }
  25. }
  26. getData.onclick = function()//获取数据
  27. {
  28. var msg = localStorage.getItem("data");
  29. if(msg)
  30. {
  31. alert("data字段中的值为:" + msg);
  32. }
  33. else
  34. {
  35. alert("data字段无值!");
  36. }
  37. }
  38. }
  39. </script>
  40. </head>
  41. <body>
  42. <input id="msg" type="text"/>
  43. <input id="setData" type="button" value="保存数据"/>
  44. <input id="getData" type="button" value="获取数据"/>
  45. </body>
  46. </html>

 

参考文献

http://blog.csdn.net/fdipzone/article/details/25517615

美文美图

 

 

文章来源: shq5785.blog.csdn.net,作者:No Silver Bullet,版权归原作者所有,如需转载,请联系作者。

原文链接:shq5785.blog.csdn.net/article/details/50591946

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。