解析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 29 HTML / CSS
css3+jq创作含苞待放的荷花
Feb 20 HTML / CSS
CSS3实现鼠标悬停显示扩展内容
Aug 24 HTML / CSS
浅谈CSS3中display属性的Flex布局的方法
Aug 14 HTML / CSS
详解HTML5 LocalStorage 本地存储
Dec 23 HTML / CSS
浅谈pc和移动端的响应式的使用
Jan 03 HTML / CSS
html5的画布canvas——画出简单的矩形、三角形实例代码
Jun 09 HTML / CSS
html5使用canvas实现跟随光标跳动的火焰效果
Jan 07 HTML / CSS
html5组织内容_动力节点Java学院整理
Jul 10 HTML / CSS
html5 canvas简单封装一个echarts实现不了的饼图
Jun 12 HTML / CSS
使用canvas对video视频某一刻截图功能
Sep 25 HTML / CSS
CSS子盒子水平和垂直居中的五种方法
Jul 23 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
php实现表单多按钮提交action的处理方法
2015/10/24 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
PHP实现websocket通信的方法示例
2018/08/28 PHP
php实现微信公众号创建自定义菜单功能的实例代码
2019/06/11 PHP
php实现的表单验证类完整示例
2019/08/13 PHP
div+css布局的图片连续滚动js实现代码
2010/05/04 Javascript
查找iframe里元素的方法可传参
2013/09/11 Javascript
node.js中的url.parse方法使用说明
2014/12/10 Javascript
学习JavaScript设计模式(单例模式)
2015/11/26 Javascript
基于jquery实现图片相关操作(重绘、获取尺寸、调整大小、缩放)
2015/12/25 Javascript
js验证手机号、密码、短信验证码代码工具类
2020/06/24 Javascript
jQuery实现腾讯信用界面(自制刻度尺)样式
2017/08/15 jQuery
对vue中methods互相调用的方法详解
2018/08/30 Javascript
jQuery使用bind动态绑定事件无效的处理方法
2018/12/11 jQuery
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
2020/04/07 Javascript
vue+elementUI 实现内容区域高度自适应的示例
2020/09/26 Javascript
python中list常用操作实例详解
2015/06/03 Python
Python设计模式中单例模式的实现及在Tornado中的应用
2016/03/02 Python
基于Django的ModelForm组件(详解)
2017/12/07 Python
python清除字符串中间空格的实例讲解
2018/05/11 Python
基于DataFrame筛选数据与loc的用法详解
2018/05/18 Python
使用pycharm和pylint检查python代码规范操作
2020/06/09 Python
解决python中0x80072ee2错误的方法
2020/07/19 Python
css3实现信纸/同学录效果的示例代码
2018/12/11 HTML / CSS
阿里云:Aliyun.com
2017/02/15 全球购物
美国新兴城市生活方式零售商:VILLA
2017/12/06 全球购物
意大利文具和办公产品在线商店:Y-Office
2020/02/27 全球购物
医药专业应届毕业生求职信范文
2014/01/01 职场文书
化学教育专业求职信
2014/07/08 职场文书
2014年乡镇工作总结
2014/11/21 职场文书
导师工作推荐信
2015/03/27 职场文书
食堂管理制度范本
2015/08/04 职场文书
网吧管理制度范本
2015/08/05 职场文书
2019个人半年工作总结
2019/06/21 职场文书
Python编解码问题及文本文件处理方法详解
2021/06/20 Python
2022漫威和DC电影上映作品
2022/04/05 欧美动漫