解析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教程(2):网页边框半径和网页圆角
Apr 02 HTML / CSS
纯css3实现鼠标经过图片显示描述的动画效果
Sep 01 HTML / CSS
CSS3新增布局之: flex详解
Jun 18 HTML / CSS
html5指南-3.如何实现html元素拖拽功能
Jan 07 HTML / CSS
HTML5中微数据概述及在搜索引擎中的使用举例
Feb 07 HTML / CSS
html5 Web SQL Database 之事务处理函数transaction与executeSQL解析
Nov 07 HTML / CSS
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
Apr 14 HTML / CSS
浅谈基于HTML5的在线视频播放方案
Feb 18 HTML / CSS
详解如何用HTML5 Canvas API控制图片的缩放变换
Mar 22 HTML / CSS
HTML5实现签到 功能
Oct 09 HTML / CSS
Html5 页面适配iPhoneX(就是那么简单)
Sep 05 HTML / CSS
吃透移动端 1px的具体用法
Dec 16 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
ExtJS与PHP、MySQL实现存储的方法
2010/04/02 PHP
老生常谈PHP位运算的用途
2017/03/12 PHP
php 生成加密公钥加密私钥实例详解
2017/06/16 PHP
脚本吧 - 幻宇工作室用到js,超强推荐base.js
2006/12/23 Javascript
jquery中的$(document).ready()与window.onload的区别
2009/11/18 Javascript
jQuery 选择器理解
2010/03/16 Javascript
最简单的js图片切换效果实现代码
2011/09/24 Javascript
JQuery魔力之$(&quot;tagName&quot;)与selector
2012/03/05 Javascript
jQuery实现Tab菜单滚动切换的方法
2015/09/21 Javascript
jQuery Validate插件实现表单强大的验证功能
2015/12/18 Javascript
简单实现AngularJS轮播图效果
2020/04/10 Javascript
详解Angular2表单-模板驱动的表单(Template-Driven Forms)
2017/08/04 Javascript
package.json配置文件构成详解
2019/08/27 Javascript
微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)
2020/06/11 Javascript
原生JavaScript实现拖动校验功能
2020/09/29 Javascript
[40:29]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第一场
2018/04/10 DOTA
python pickle 和 shelve模块的用法
2013/09/16 Python
Python基于回溯法子集树模板实现图的遍历功能示例
2017/09/05 Python
python3+PyQt5 创建多线程网络应用-TCP客户端和TCP服务器实例
2019/06/17 Python
Python Web程序搭建简单的Web服务器
2019/07/31 Python
Django 后台带有字典的列表数据与页面js交互实例
2020/04/03 Python
详解Python中list[::-1]的几种用法
2020/11/16 Python
美国购买肉、鸭、家禽、鹅肝和熟食网站:D’Artagnan
2018/11/13 全球购物
面试后的英文感谢信
2014/02/01 职场文书
通信研究生自荐信
2014/02/01 职场文书
个人贷款承诺书
2014/03/28 职场文书
房地产资料员岗位职责
2014/07/02 职场文书
2014年安全生产责任书
2014/07/22 职场文书
改革共识倡议书
2014/08/29 职场文书
效能风暴心得体会
2014/09/04 职场文书
2015年上半年物业工作总结
2015/03/30 职场文书
慈善募捐倡议书
2015/04/27 职场文书
市级三好生竞选稿
2015/11/21 职场文书
普希金的诗歌赏析(3首)
2019/08/20 职场文书
TensorFlow中tf.batch_matmul()的用法
2021/06/02 Python
Mysql关于数据库是否应该使用外键约束详解说明
2021/10/24 MySQL