登录  /  注册
博主信息
博文 128
粉丝 9
评论 5
访问量 230878
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
【收藏】JavaScript本地存储localStorage、sessionStorage用法总结详解
 一纸荒凉* Armani
原创
1864人浏览过

各种存储方案

  • Cookies:浏览器均支持,容量为4KB
  • UserData:仅IE支持,容量为64KB
  • Flash:100KB,非HTML原生,需要插件支持
  • Google Gears SQLite:需要插件支持,容量无限制
  • LocalStorage:HTML5,容量为5M
  • SesstionStorage:HTML5,容量为5M
  • globalStorage:Firefox独有的,Firefox13开始就不再支持这个方法

作为Web开发人员,在 Web浏览器中存储数据以改善用户体验和提升Web应用程序性能是非常常见的。在大多数情况下,可供我们使用就是LocalStorage和SessionStorage。

本篇主要介绍localStorage和sessionStorage的用法详解

SessionStorage 和 LocalStorage 简介

在HTML5之前,开发人员一般是通过使用Cookie在客户端保存一些简单的信息的。在HTML5发布后,提供了一种新的客户端本地保存数据的方法,那就是Web Storage,它也被分为:LocalStorage和SessionStorage,它允许通过JavaScript在Web浏览器中以键值对的形式保存数据。而相比Cookie有如下优点:

  • 拥有更大的存储容量,Cookie是4k,Web Storage为5M。

  • 操作数据相比Cookie更简单。

  • 不会随着每次请求发送到服务端。

您可以使用浏览器window对象访问SessionStorage和LocalStorage。请看下面的示例:

  1. sessionStorage = window.sessionStorage
  2. localStorage = window.localStorage

localStorage存储

  1. //存储一个item
  2. localStorage.setItem('name','zhang')
  3. localStorage.setItem('age',18)
  4. //读取一个item
  5. localStorage.getItem('name') // "zhang"
  6. localStorage.getItem('age') // "18"
  7. //get存储对象长度
  8. localStorage.length // returns 2
  9. //通过索引get对应的key名
  10. localStorage.key(0) // returns "name"
  11. //移除一个item
  12. localStorage.removeItem('name')
  13. //清空存储对象
  14. localStorage.clear()

sessionStorage存储

  1. //存储一个item
  2. sessionStorage.setItem('name','zhang')
  3. sessionStorage.setItem('age',18)
  4. //读取一个item
  5. sessionStorage.getItem('name') // "zhang"
  6. sessionStorage.getItem('age') // "18"
  7. //get存储对象长度
  8. sessionStorage.length // returns 2
  9. //通过索引get对应的key名
  10. sessionStorage.key(0) // returns "name"
  11. //移除一个item
  12. sessionStorage.removeItem('name')
  13. //清空存储对象
  14. sessionStorage.clear()

注意:他们都是以字符串方式进行存储的,下面我们以存储一个JavaScript对象来作为演示

  1. let obj = {name: 'zhang',age: 18};
  2. // 需要将其转换为JSON字符串
  3. localStorage.setItem('myObj',JSON.stringify(obj));
  4. let str = localStorage.getItem('myObj');
  5. console.log(JSON.parse(str));

简单的web存储留言板

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>localStorage demo</title>
  6. </head>
  7. <body>
  8. <div>
  9. <h3>简单的web存储留言板</h3>
  10. <textarea id="textarea"></textarea>
  11. <input type="button" onclick="addInfo()" value="留言" />
  12. <input type="button" onclick="cleanInfo()" value="清除留言" />
  13. </div>
  14. <script type="text/javascript">
  15. function upInfo() {
  16. if(window.localStorage){
  17. var lStorage = window.localStorage;
  18. var textarea = window.document.getElementById("textarea");
  19. var text = lStorage.getItem("text");
  20. if (text) {
  21. textarea.value = text;
  22. }else {
  23. textarea.value = "还没有留言";
  24. }
  25. }
  26. }
  27. function addInfo() {
  28. if(window.localStorage){
  29. var textarea = window.document.getElementById("textarea");
  30. var lStorage = window.localStorage;
  31. lStorage.setItem("text",textarea.value);
  32. upInfo();
  33. }
  34. }
  35. function cleanInfo() {
  36. window.localStorage.removeItem("text");
  37. upInfo();
  38. }
  39. upInfo();
  40. </script>
  41. </body>
  42. </html>

localStorage和sessionStorage的区别:

localStorage和sessionStorage的存储数据的语法完全相同,只是各自的生命周期不同罢了,sessionStorage存储的数据的生命周期为只保存在设置session的当前窗口和当前窗口新建的新窗口,localStorage则能永久存储直到浏览器卸载或者人为去清除。

LocalStorage和SessionStorage之间的主要区别在于浏览器窗口和选项卡之间的数据共享方式不同。

LocalStorage可跨浏览器窗口和选项卡间共享。就是说如果在多个选项卡和窗口中打开了一个应用程序,而一旦在其中一个选项卡或窗口中更新了LocalStorage,则在所有其他选项卡和窗口中都会看到更新后的LocalStorage数据。

但是,SessionStorage数据独立于其他选项卡和窗口。如果同时打开了两个选项卡,其中一个更新了SessionStorage,则在其他选项卡和窗口中不会反映出来。举个例子:假设用户想要通过两个浏览器选项卡预订两个酒店房间。由于这是单独的会话数据,因此使用SessionStorage是酒店预订应用程序的理想选择。

本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学