解析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 media queries + jQuery实现响应式导航
Sep 30 HTML / CSS
你正在寻找的CSS3 动画技术
Jul 27 HTML / CSS
纯CSS3实现的阴影效果
Dec 24 HTML / CSS
详解css3 Transition属性(平滑过渡菜单栏案例)
Sep 05 HTML / CSS
浅谈css3新单位vw、vh、vmin、vmax的使用详解
Dec 01 HTML / CSS
CSS3实现全景图特效示例代码
Mar 26 HTML / CSS
使用CSS3制作版头动画效果
Dec 24 HTML / CSS
免费获得微软MCSD证书赶快行动吧!
Nov 13 HTML / CSS
HTML5微信播放全屏问题的解决方法
Mar 09 HTML / CSS
关于iframe跨域使用postMessage的实现
Oct 29 HTML / CSS
Html5写一个简单的俄罗斯方块小游戏
Dec 03 HTML / CSS
如何利用 CSS Overview 面板重构优化你的网站
Oct 24 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一句话cmdshell新型 (非一句话木马)
2009/04/18 PHP
php读取图片内容并输出到浏览器的实现代码
2013/08/08 PHP
PHP SPL标准库之数据结构堆(SplHeap)简单使用实例
2015/05/12 PHP
py文件转exe时包含paramiko模块出错解决方法
2016/08/12 PHP
php批量删除操作代码分享
2017/02/26 PHP
laravel入门知识点整理
2020/09/15 PHP
基于JavaScript 类的使用详解
2013/05/07 Javascript
js对象的复制继承实例
2015/01/10 Javascript
有效提高JavaScript执行效率的几点知识
2015/01/31 Javascript
js实现无缝循环滚动
2020/06/23 Javascript
angular ng-repeat数组中的数组实例
2017/02/18 Javascript
浅谈jQuery框架Ajax常用选项
2017/07/08 jQuery
vue cli升级webapck4总结
2018/04/04 Javascript
用vue2.0实现点击选中active其他选项互斥的效果
2018/04/12 Javascript
vue中使用微信公众号js-sdk踩坑记录
2019/03/29 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
2019/05/20 Javascript
Nodejs技巧之Exceljs表格操作用法示例
2019/11/06 NodeJs
使用PyCharm配合部署Python的Django框架的配置纪实
2015/11/19 Python
利用python批量检查网站的可用性
2016/09/09 Python
Python实现简单的语音识别系统
2017/12/13 Python
python 3.5实现检测路由器流量并写入txt的方法实例
2017/12/17 Python
python基础之包的导入和__init__.py的介绍
2018/01/08 Python
tensorflow学习笔记之简单的神经网络训练和测试
2018/04/15 Python
详解python中的装饰器
2018/07/10 Python
Python实现的拉格朗日插值法示例
2019/01/08 Python
pandas dataframe的合并实现(append, merge, concat)
2019/06/24 Python
33个Python爬虫项目实战(推荐)
2019/07/08 Python
Python魔法方法 容器部方法详解
2020/01/02 Python
CSS3中文字镂空、透明值、阴影效果设置示例小结
2016/03/07 HTML / CSS
谷歌浏览器小字体处理方案即12px以下字体
2013/12/17 HTML / CSS
20世纪40年代连衣裙和复古服装:The Seamstress Of Bloomsbury
2018/07/24 全球购物
教师辞职报告范文
2014/01/20 职场文书
企业总经理岗位职责
2014/02/13 职场文书
整改落实自查报告
2014/11/05 职场文书
大学学习委员竞选稿
2015/11/20 职场文书
如何利用Python实现一个论文降重工具
2021/07/09 Python