解析HTML5中的新功能本地存储localStorage


Posted in HTML / CSS onMarch 01, 2016

Html5 的local storage 是通过浏览器在本地存储的数据。
基本使用方法如下:

JavaScript Code复制内容到剪贴板
  1. <script type="text/javascript">     
  2. localStorage.firstName = "Tom";     
  3. alert(localStorage.firstName);     
  4. </script>    

这样的话,就将数据保存到本地了,但是本地数据是以什么形式进行保存的呢,经过跟踪,发现在Chrome浏览器中,数据是以sqlite的数据库文件形式存储的。
在windows下,是保存在C:\Documents and Settings\User Name\Local Settings\Application Data\Google\Chrome\User Data\Default\Local Storage 路径(其中User Name是指当前的用户名)下的;
在Mac下,是保存在/Users/User Name/Library/Application Support/Google/Chrome/Default/Local Storage路径(其中User Name是指当前的用户名)路径下的
虽然后缀名是.localstorege 但是实际上就是sqlite的数据库文件,可以用sqlite打开,并看到其中的数据。(可以使用firefox的SQLite Manager附加组件打开)
安装组件步骤和安装firebug类似,选择菜单工具-->附件组件,打开附件组件设置页,搜索"SQLite Manager"关键字,安装"SQLite Manager"插件后重启firefox,就可以在工具中看到"SQLite Manager"附加组件了,如下图所示:
下图是查看刚刚保存的本地数据文件
解析HTML5中的新功能本地存储localStorage
下面是几个常用的localStorage方法:

1、添加localStorage

XML/HTML Code复制内容到剪贴板
  1. localStorage.setItem(“key”,”value”);     //以“key”为名称存储一个值“value”  

2、获取localStorage

XML/HTML Code复制内容到剪贴板
  1. localStorage.getItem(“key”);    //获取名称为“key”的值  

3、删除localStorage

XML/HTML Code复制内容到剪贴板
  1. localStorage.removeItem(“key”);     //删除名称为“key”的信息  

4、清空localStorage

XML/HTML Code复制内容到剪贴板
  1. localStorage.clear();     //清空localStorage中所有信息  

5、查看已经保存的localStorage

可通过chrome浏览器的控制台工具Resource–Local Storage里查看
解析HTML5中的新功能本地存储localStorage

HTML / CSS 相关文章推荐
CSS3属性选择符介绍
Oct 17 HTML / CSS
CSS3属性background-size使用指南
Dec 09 HTML / CSS
CSS3实现网站商品展示效果图
Jan 18 HTML / CSS
css3实现背景模糊的三种方式(小结)
May 15 HTML / CSS
CSS3实现莲花绽放的动画效果
Nov 06 HTML / CSS
HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5 canvas 绘制精美的图
Aug 31 HTML / CSS
Html5实现移动端、PC端 刮刮卡效果
Jun 30 HTML / CSS
【HTML5】3D模型--百行代码实现旋转立体魔方实例
Dec 16 HTML / CSS
浅谈HTML5 FileReader分布读取文件以及其方法简介
Nov 09 HTML / CSS
canvas拼图功能实现代码示例
Nov 21 HTML / CSS
浅析HTML5中的download属性使用
Mar 13 HTML / CSS
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
Mar 17 HTML / CSS
基于HTML5的齿轮动画特效
Feb 29 #HTML / CSS
HTML5中meta属性的使用方法
Feb 29 #HTML / CSS
HTML5+lufylegend实现游戏中的卷轴
Feb 29 #HTML / CSS
HTML5实现动画效果的方式汇总
Feb 29 #HTML / CSS
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
Feb 28 #HTML / CSS
一波HTML5 Canvas基础绘图实例代码集合
Feb 28 #HTML / CSS
很酷的HTML5电子书翻页动画特效
Feb 25 #HTML / CSS
You might like
老机欣赏|中国60年代精品收音机
2021/03/02 无线电
Mac系统完美安装PHP7详细教程
2017/06/06 PHP
laravel 解决ajax异步提交数据,并还回填充表格的问题
2019/10/15 PHP
img的onload的另类用法
2008/01/10 Javascript
检测input每次的输入是否合法遇到汉字输入就有问题
2012/05/23 Javascript
如何动态的导入js文件具体该怎么实现
2014/01/14 Javascript
登陆成功后自动计算秒数执行跳转
2014/01/23 Javascript
显示今天的日期js代码(阳历和农历)
2014/09/30 Javascript
node中socket.io的事件使用详解
2014/12/15 Javascript
js实现对table动态添加、删除和更新的方法
2015/02/10 Javascript
JavaScript常用脚本汇总(二)
2015/03/04 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
2015/11/02 Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
2015/11/29 Javascript
vue 2.0路由之路由嵌套示例详解
2017/05/08 Javascript
详解Vue中状态管理Vuex
2017/05/11 Javascript
vue 添加vux的代码讲解
2017/11/30 Javascript
在Vue项目中使用d3.js的实例代码
2018/05/01 Javascript
微信小程序实现banner图轮播效果
2020/06/28 Javascript
vue项目前端埋点的实现
2019/03/06 Javascript
微信小程序实现带放大效果的轮播图
2020/05/26 Javascript
bootstrap实现tab选项卡切换
2020/08/09 Javascript
python复制文件的方法实例详解
2015/05/22 Python
python制作最美应用的爬虫
2015/10/28 Python
HTML5本地存储之IndexedDB
2017/06/16 HTML / CSS
HTML5超炫酷粒子效果的进度条的实现示例
2019/08/23 HTML / CSS
Hotels.com中国区:好订网
2016/08/18 全球购物
美国潜水装备、水肺潜水和浮潜设备商店:Leisure Pro
2018/08/08 全球购物
C#面试问题
2016/07/29 面试题
大学生年度自我鉴定
2013/10/31 职场文书
社区庆八一活动方案
2014/02/02 职场文书
热爱祖国的演讲稿
2014/05/04 职场文书
职业道德模范事迹材料
2014/08/24 职场文书
作风建设年活动总结
2014/08/27 职场文书
医者仁心观后感
2015/06/17 职场文书
2016大学生形势与政策心得体会
2016/01/12 职场文书
交通安全学习心得体会
2016/01/18 职场文书