HTML5 Web 存储 优于 Cookie 的本地存储方式

HTML5 Web 存储 优于 Cookie 的本地存储方式

韩小韩
2021-05-22 / 2 评论 / 221 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2021年05月22日,已超过1041天没有更新,若内容或图片失效,请留言反馈。

HTML5 Web 存储目前有两种存储对象:localStorage 和 sessionStorage

客户端存储数据的两个对象为:

  • localStorage – 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除
  • sessionStorage – 用于临时保存同一窗口 (或标签页) 的数据,在关闭窗口或标签页之后将会删除这些数据

这样两种存储对象的区别也就出来了:localStorage 属于永久性存储,而 sessionStorage 属于当会话结束的时候,sessionStorage 中的键值对会被清空

也就是说 localStorage 对象存储的数据没有时间限制,第二天、第二周或下一年之后,数据依然可用,sessionStorage 对象当用户关闭浏览器窗口后,数据会被删除

HTML5 Web 存储的局限性

  1. 浏览器的存储大小不统一,并且在 IE8 以上的浏览器版本才支持 HTML5 Web 存储
  2. HTML5 Web 存储本质上是对字符串的读取,如果存储内容多的话会消耗内存空间,会导致页面变卡

HTML5 Web 存储的使用

不管是 localStorage,还是 sessionStorage,可使用的 API 方法都相同,常用的有如下几个(以 localStorage 为例):

  • 保存数据:localStorage.setItem (key,value);
  • 读取数据:localStorage.getItem (key);
  • 删除单个数据:localStorage.removeItem (key);
  • 删除所有数据:localStorage.clear ();
  • 得到某个索引的 key:localStorage.key (index);

需要使用 sessionStorage 的时候,只需要将 localStorage 替换成 sessionStorage 即可
在使用的时候最好将数据转为 JSON 字符串然后存入

贴个实例:

// 监听textarea变化
$("textarea").change(function(){
    // 变量名随意
    var wikiContent = {'content' : $('#content').val()}; 
    // 存储值:将对象转换为Json字符串。如果有多条数据的话,key 最好做一下区分
    localStorage.setItem("wikiContent", JSON.stringify(wikiContent));
});

var wikiJsonStr = localStorage.getItem("wikiContent");
// 取值时:把获取到的Json字符串转换回对象
wikiLocalContent = JSON.parse(wikiJsonStr);
// 获取对应的值
console.log(wikiLocalContent.content);
0

评论 (2)

取消
  1. 头像
    林羽凡
    Windows 10 Windows 10 / Google Chrome Google Chrome 中国甘肃省移动

    一般小站点存的数据不多的,可以用html5存到本地。

    回复
    1. 头像
      韩小韩 作者
      Mac OS X 10.15.7 Mac OS X 10.15.7 / Google Chrome Google Chrome 中国江苏省南京市联通
      @ 林羽凡

      👍

      回复