专栏首页沈唁志一个比 Cookie 更好的本地存储方式 – HTML5 Web 存储

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

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

原创文章采用CC BY-NC-SA 4.0协议进行许可,转载请注明:转载自:一个比 Cookie 更好的本地存储方式 – HTML5 Web 存储

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 如何在CentOS 7上安装PostgreSQL关系数据库

    PostgreSQL关系数据库系统是一个功能强大的,可扩展的,并符合标准的开源数据库平台。本指南将帮助您在CentOS 7 Linode上安装和配置Postgr...

    沈唁
  • 创建属于自己的第一个Composer/Packagist包

    Composer 是 PHP 的一个依赖管理工具,Composer 不是一个包管理器,它涉及 “packages” 和 “libraries”,但它在每个项目的...

    沈唁
  • 博客开启HTTPS

    沈唁
  • BASE 理论

    BASE 是 Basically Available(基本可用) 、Soft-state(软状态) 和 Eventually Consistent(最终一致性)...

    happyJared
  • 架构师之路 - 存储架构

    架构师在做架构设计时一定绕不开存储的设计,本文我们一起来了解一下存储的相关知识。主要内容包括存储使用方式、常见协议、链接方式以及分布式存储架构中的典型架构案例。

    JAVA日知录
  • Firefox Private Network使用方法(极详细)

    Firefox Private Network是火狐9月初重启的项目,简单讲:信息的加密传输,也就是X墙。 我试用了一个月了,YouTube 1080 P视频没...

    营琪
  • Remoting: Server encountered an internal error

    发生这个错误的原因是Remoting的一个配置项: <customErrors> 元素   指示此应用程序域中的服务器通道是否将经筛选的或完整的异常信息返回给本...

    张善友
  • Linux CentOS下,浏览器乱码,支持中文解决;以及中文输入法的安装

    用户1272546
  • 用js来实现那些数据结构07(链表01-链表的实现)

      前面讲解了数组,栈和队列。其实大家回想一下。它们有很多相似的地方。甚至栈和队列这两种数据结构在js中的实现方式也都是基于数组。无论增删的方式、遵循的原则如何...

    zaking
  • python3--文件操作

    rb,只读,以bytes类型读取(非文字类的文件时,用rb,比如图片,音频文件等)

    py3study

扫码关注云+社区

领取腾讯云代金券