一个比 Cookie 更好的本地存储方式|HTML5 Web 存储

cera cera

Web 开发中经常会遇到网站需要做一些例如用户备忘录、文章修改自动保存等需求

这些功能不需要长期保存,也不需要入数据库,所以有人可能会考虑使用 Cookie 去进行存储,但是 Cookie 中每条的存储空间为 4k,存储太多的数据时可能会出现存储空间不足的问题

于是就有了 Web 存储来解决这个问题,Web 存储更加的安全与快速。这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据,而不影响网站的性能

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);

cera cloudiplc tengxunyun

相关推荐