解析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制作苹果风格键盘特效
Feb 26 HTML / CSS
使用CSS3美化HTML表单的技巧演示
May 17 HTML / CSS
CSS3 box-shadow属性实例详解
Jun 19 HTML / CSS
使用HTML5 IndexDB存储图像和文件的示例
Nov 05 HTML / CSS
html特殊符号示例 html特殊字符编码对照表
Jan 14 HTML / CSS
使用jTopo给Html5 Canva中绘制的元素添加鼠标事件
May 15 HTML / CSS
让IE下支持Html5的placeholder属性的插件
Sep 02 HTML / CSS
使用HTML5进行SVG矢量图形绘制的入门教程
Feb 19 HTML / CSS
HTML5 虚拟键盘出现挡住输入框的解决办法
Feb 14 HTML / CSS
css3实现的加载动画效果
Apr 07 HTML / CSS
CSS实现两列布局的N种方法
Aug 02 HTML / CSS
HTML常用标签超详细整理
Mar 19 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
人大复印资料处理程序_输入篇
2006/10/09 PHP
mysql时区问题
2008/03/26 PHP
Zend Framework实现自定义过滤器的方法
2016/12/09 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
基于jquery实现漂亮的动态信息提示效果
2011/08/02 Javascript
js进行表单验证实例分析
2015/02/10 Javascript
JavaScript实现的字符串replaceAll函数代码分享
2015/04/02 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
2015/04/12 Javascript
Nodejs爬虫进阶教程之异步并发控制
2016/02/15 NodeJs
JS中setTimeout的巧妙用法前端函数节流
2016/03/24 Javascript
jQuery事件详解
2017/02/23 Javascript
js自定义Tab选项卡效果
2017/06/05 Javascript
jQuery中each循环的跳出和结束实例
2017/08/16 jQuery
Javascript中的getter和setter初识
2017/08/17 Javascript
vue.js 实现评价五角星组件的实例代码
2018/08/13 Javascript
js前端对于大量数据的展示方式及处理方法
2020/12/02 Javascript
python with statement 进行文件操作指南
2014/08/22 Python
在Python中利用Pandas库处理大数据的简单介绍
2015/04/07 Python
基于numpy.random.randn()与rand()的区别详解
2018/04/17 Python
python3+PyQt5+Qt Designer实现扩展对话框
2018/04/20 Python
python 函数内部修改外部变量的方法
2018/12/18 Python
如何提高python 中for循环的效率
2020/04/15 Python
自学python用什么系统好
2020/06/23 Python
Python爬虫之Selenium下拉框处理的实现
2020/12/04 Python
CSS3实现曲线阴影和翘边阴影
2016/05/03 HTML / CSS
HTML5添加鼠标悬浮音响效果不使用FLASH
2014/04/23 HTML / CSS
英国买鞋网站:Charles Clinkard
2019/11/14 全球购物
洗煤厂厂长岗位职责
2014/01/03 职场文书
安全保证书
2015/01/16 职场文书
卫生院艾滋病宣传活动总结
2015/05/09 职场文书
匿名信格式范文
2015/05/27 职场文书
教导处教学工作总结
2015/08/12 职场文书
商务英语邮件开头问候语
2015/11/10 职场文书
Python使用OpenCV实现虚拟缩放效果
2022/02/28 Python
OpenCV实现常见的四种图像几何变换
2022/04/01 Python
Python 统计序列中元素的出现频度
2022/04/26 Python