HTML5本地存储之Web Storage

简介: Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,WebStorage官方建议为每个网站5MB。Web Storage又分为两种:       sessionStorage       localStorage 从字面意思就可以很清楚的看出来,ses

Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,WebStorage官方建议为每个网站5MB。

Web Storage又分为两种:

       sessionStorage

       localStorage

 

从字面意思就可以很清楚的看出来,sessionStorage将数据保存在session中,浏览器关闭也就没了;而localStorage则一直将数据保存在客户端本地;

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

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

·        读取数据:localStorage.getItem(key);

·        删除单个数据:localStorage.removeItem(key);

·        删除所有数据:localStorage.clear();

·        得到某个索引的key:localStorage.key(index);

如上,key和value都必须为字符串,换言之,web Storage的API只能操作字符串,对于JS中常用的数组或对象却不能直接存储。

 

但我们可以通过JSON对象提供的parse和stringify将其他数据类型转化成字符串,再存储到storage中就可以了。请看下面的代码。

var obj = { name:'Jim' };

var str =JSON.stringify(obj);

//存入

localStorage.obj = str;

//读取

str = localStorage.obj;

//重新转换为对象

obj = JSON.parse(str);

 

localStorage语法很简单,而且我们不需要考虑具体的实现机制:

 

  1 window.localStorage.getItem( key );

  2 window.localStorage.setItem( key, value );

  3 window.localStorage.removeItem( key );

  4 window.localStorage.clear();

  5 window.localStorage.length;

  6 window.localStorage.key( i );

 

上述五个方法和一个属性是最常用、也够用的localStorage的接口,也是所有实现得最为统一的接口。更多其他使用方法,请自行百度查找,这里不一一列举。

 

Web Storage这个东西真正好:量大、永久存储、不用使用任何插件,不随http发送 … 用来保存一些用户非敏感的状态和信息是再合适不过的了。其浏览器兼容性如下:

可以看到,由于除IE外的其他浏览器很早的版本都支持了,关键是我们可以不用考虑这些浏览器的更低版本,所以基本上可以认为都已经支持了localStorage,而IE是个特例,虽然IE8就开始支持localStorage应该夸奖,但是其更低版本IE却都不支持,令人气馁的是,这些低版本浏览器在中国的占有率挺高…

 

这是一个微信案例。

https://mp.weixin.qq.com/s/0P6L80wvLBX-g9Onu2pxXA

 

将JS 存入了localStorage。

目录
相关文章
|
3月前
|
XML 移动开发 前端开发
HTML5简介(什么是网页、什么是 HTML、Web标准)
网站是指在因特网上根据一定的规则,使用 HTML 等制作的用于展示特定内容相关的网页集合。
36 0
|
1天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
5 1
|
1天前
|
PHP
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
|
18天前
|
移动开发 监控 数据可视化
组态软件之万维组态介绍(web组态、html组态、vue2/vue3组态)
组态软件之万维组态、web组态、html组态、vue2/vue3组态,组态在工业自动化领域越来越重要,但由于市面上组态软件费用昂贵、集成复杂,使用技术门槛高,万维组态就应运而生;万维组态是一款功能强大的基于Web的可视化组态编辑器,采用标准HTML5技术,使用Vue2和Vue3语言,基于B/S架构进行开发,支持WEB端显示;支持快速集成,集成简单方便;支持在浏览器端完成便捷的人机交互,简单的拖拽即可完成可视化页面的设计;可快速构建和部署可扩展的SCADA、HMI、仪表板或LoT系统;
组态软件之万维组态介绍(web组态、html组态、vue2/vue3组态)
|
24天前
|
移动开发 前端开发 HTML5
Web前端全栈HTML5通向大神之路
本套课程共三大阶段,六大部分,是WEB前端、混合开发与全栈开发必须要掌握的技能,从基础到实践,是从编程小白成长为全栈大神的最佳教程!
29 3
Web前端全栈HTML5通向大神之路
|
3月前
|
前端开发 Linux 编译器
web开发:HTML详解
web开发:HTML详解
45 0
|
3月前
|
前端开发 JavaScript 定位技术
web版拳皇,使用html,css,js来制作一款拳皇游戏
web版拳皇,使用html,css,js来制作一款拳皇游戏
35 0
|
3月前
|
移动开发 前端开发 JavaScript
web前端基础(一)——HTML+CSS
web前端基础(一)——HTML+CSS
106 0
|
4月前
|
自然语言处理 算法 数据库
【JavaScript+自然语言处理+HTML+CSS】实现Web端的智能聊天问答客服实战(附源码 超详细必看)
【JavaScript+自然语言处理+HTML+CSS】实现Web端的智能聊天问答客服实战(附源码 超详细必看)
50 0
|
4月前
|
移动开发 前端开发 HTML5
【Web端智能聊天客服】之HTML、CSS、Bootstrap的讲解及实例(超详细必看 附源码)
【Web端智能聊天客服】之HTML、CSS、Bootstrap的讲解及实例(超详细必看 附源码)
50 0