黄聪:360浏览器、chrome开发扩展插件教程(3)关于本地存储数据
转载:http://www.cnblogs.com/walkingp/archive/2011/04/04/2003875.html
HTML5中的localStorage
localStorage与cookie类似,它是存储在客户端浏览器中的数据,它与cookie不同的一点是它没有时间限制。localStorage属于html5中的新特性,在浏览器支持localStorage统计中,Chrome4+、Firefox3.5+、IE8+、IE7兼容模式、Safari4+、Opera10.5+都是支持localStorage的。以下代码可以用于检测你的浏览器是否支持localStorage:
if (window.localStorage){ alert( '你的浏览器支持localStorage!' ); } else { alert( '浏览器不支持localStorage!' ); } |
localStorage是以key/value方式来进行存储的,并且value只能是字符串形式,如果你要使用其他数据类型,需要进行相应的转换。设置和获取localStorage方法是使用localStorage.key,或localStorage[key]的形式,如:
localStorage.myName= 'walkingp' ; alert( 'name:' + localStorage.myName + '\rsite:' + localStorage[ 'mySite' ]); |
修改其值就是重新设置相应的localStorage项取值。移除其值可以将其值设为null。
localStorage[ 'mySite' ]= null ; |
也可以使用localStorage自带方法getItem()、setItem()和removeItem()来进行相应的获取、设置和移除localStorage项。
localStorage.setItem( 'age' , '24' ); var age=localStorage.getItem( 'age' ); alert( 'age:' + age); //age:24 localStorage.removeItem( 'age' ); age=localStorage.getItem( 'age' ); alert( 'age? ' + age); //age? null |
可以使用clear()方法来清空所有localStorage。
对于不同域的localStorage,如本地和a.com,两者不影响对方。
关于localStorage本地存储大小,有人测试结果是其他浏览器为5M,Firefox没有作限制。而cookie一般只有几K,可见localStorage非常适合做稍大一些的数据存储,当然对于Chrome等扩展开发是非常合适的。
浏览器中的localStorage管理工具
Chrome和Safari均有自己的本地localStorage查看和管理工具,Firefox拥有第三方插件可以管理 localStorage,Chrome中位于开发人员工具中的Resources左侧的Databases(可能稍早一点的版本位于单独出来的工具 栏)。我们上面的localStorage在Chrome查看如下,利用这个工具可以修改或者删除相应项。
Safari中需要先在“偏好设置”、“高级”中将“在菜单中显示开发选项”勾选。
开始存储我们的localStorage
以上是我们需要了解的关于localStorage的知识,接下来就是把这个知识应用到我们Chrome扩展中。我们的数据存储分为两个部分,一是每项task需要存储的内容,它是以JSON的形式来存储的,形式如下:
task1:{ "id" :1, "task_item" : "新任务" , "add_time" : "2011-04-04T03:20:34.879Z" , "is_finished" : false } |
task1表示key项,后台的JSON表示value项。意义很简单明了,其中is_finished表示当前任务是否已完成。当更新任务状态时就是将此项取值进行相应的更改。
还要放一个指向当前任务的数据,让它充当指针的作用,这样在添加新项时就不需要查询已有task项的id了。
'Tasks:index' :1 |
下面是我们代码的具体实现,首先开始初始化数据:
var Tasks = { //指针 index:window.localStorage.getItem( 'Tasks:index' ), //初始化 init: function (){ if (!Tasks.index){ window.localStorage.setItem( 'Tasks:index' ,Tasks.index=0); } //初始化数据 if (window.localStorage.length-1){ var task_list=[]; var key; for ( var i=0,len=window.localStorage.length;i<len;i++){ key=window.localStorage.key(i); if (/task:\d+/.test(key)){ task_list.push(JSON.parse(window.localStorage.getItem(key))); } } for ( var i=0,len=task_list.length;i<len;i++){ Tasks.AppendHtml(task_list[i]); } } }, //*** } |
然后是分别是增加项Add()、修改项Edit()和删除项Del()的方法:
//增加 Add: function (task){ //更新指针 window.localStorage.setItem( 'Tasks:index' , ++Tasks.index); task.id=Tasks.index; window.localStorage.setItem( "task:" + Tasks.index, JSON.stringify(task)); }, //修改 Edit: function (task){ window.localStorage.setItem( "task:" + task.id, JSON.stringify(task)); }, //删除 Del: function (task){ window.localStorage.removeItem( "task:" + task.id); }, //*** |
其中的JSON.stringify是JSON将Javascript数据结构转换为JSON文本的方法,它与eval()为互操作。详情可见http://json.org/js.html 。
这样我们就将一个简单的Chrome扩展完成了,演示效果图如下:
当然它现在的功能还不够强大,我们还可以对它进行继续扩展,比如任务排序、任务分组、网络存储、定时提醒等。
系列文章至此暂时结束,全部代码包括生成后.crx文件已经打包,下载请点击此处。可能已有代码有一些处理不完善的地方,欢迎大家一一指出,共同进步!
黄聪:360浏览器、chrome开发扩展插件教程(3)关于本地存储数据的更多相关文章
- 黄聪:360浏览器、chrome开发扩展插件教程(1)开发Chrome Extenstion其实很简单
转载:http://www.cnblogs.com/walkingp/archive/2011/03/31/2001628.html Chrome的更新速度可以说前无古人,现在我每天开机的第一件事就是 ...
- 黄聪:360浏览器、chrome开发扩展插件教程(2)为html添加行为
转载:http://www.cnblogs.com/walkingp/archive/2011/04/02/2002668.html 上一节我们已经讲了Chrome扩展的基础知识,并构建了基础的htm ...
- 黄聪:将自己开发的插件发布到WordPress官方插件站(转)
原文作者:我爱水煮鱼 把你的插件发布到 WordPress 官方插件目录是让更多人用到插件的好方法,这样可以让你的插件不仅仅给我们中国人民使用,而且还可以让你的插件给全世界人民使用,想想全世界人民都在 ...
- Chrome浏览器录屏扩展插件
Chrome浏览器录屏扩展插件,可以录制网页操作或者桌面操作.生成MP4 Loom https://chrome.google.com/webstore/detail/loom-video-recor ...
- 手把手教你开发Chrome扩展三:关于本地存储数据
手把手教你开发chrome扩展一:开发Chrome Extenstion其实很简单 手把手教你开发Chrome扩展二:为html添加行为 手把手教你开发Chrome扩展三:关于本地存储数据 HTML5 ...
- 黄聪:《跟黄聪学WordPress主题开发》
又一个作品完成!<跟黄聪学Wordpress主题开发>,国内最好的Wordpress主题模版开发视频教程!! 目录预览: WordPress官方源文件层式结构讲解 WordPress数据库 ...
- 提高工作效率的神器:基于前端表格实现Chrome Excel扩展插件
Chrome插件,官方名称extensions(扩展程序):为了方便理解,以下都称为插件. 我们开发的插件需要在浏览器里面运行,打开浏览器,通过右上角的三个点(自定义及控制)-更多工具-拓展程序-打开 ...
- 开发DZ插件教程
插件制作的基本思路是:(初学者适用)1.形成插件思路2.制作插件界面3.构架程序模块4.搭建存储数据5.填充功能语句6.检查应用错误7.完善插件功能 前言:为方便互联网数万Discuz!爱好者,更加深 ...
- 黄聪:360、chrome开发插件扩展如何跨域调用其他网站的信息并且显示在扩展、tab中的api
chrome插件提供了查找tab的api chrome.tabs.get(integer tabId, function callback) 但是出于安全的考虑,tab的属性中没有document 因 ...
随机推荐
- Javaworkers团队第二周项目总结
本周项目进展 本周我们小组成员在图书馆和网上查阅了很多资料,基本达到了预期的计划,完成了项目框架设计及代码模块设计. 设计思路 1.首先,根据用户需求合理分配代码密度,即: 用户直接操作(点击运行)的 ...
- Today's harvest !!!
今天将Mybatis的视频看到了第60集,其之前讲解了自表的主外键查询.例如一个新闻表中,有一级栏目,二级栏目,三级栏目,其中二级栏目的pid为一级栏目的id,如此种种. 而今天做的小项目中使用了 e ...
- css 基础-1
css 基础-1 一. HTML框架 (frameset) 属性: noresize(不可移动), border(边框线的大小), rows(分割成行), cols(分割列) ...
- codevs 2216 行星序列 线段树+延迟标记(BZOJ 1798)
2216 行星序列 时间限制: 2 s 空间限制: 256000 KB 题目描述 Description “神州“载人飞船的发射成功让小可可非常激动,他立志长大后要成为一名宇航员假期一始, ...
- iframe与父页面传值
最近做的项目中用到了不少iframe,而且需要实现: 从父页面获取iframe中某个元素的值或则从iframe页面获取其父页面上某个元素的值. 在网上查询了相关东西,后总结如下: (1)父页面获取if ...
- Java如何用一行代码初始化ArrayList
参考链接: 1.Initialization of an ArrayList in one line 2.java怎么用一行代码初始化ArrayList
- 【转】Scala基础知识
原文地址.续 课程内容: 关于这节课 表达式 值 函数 类 继承 特质 类型 apply方法 单例对象 函数即对象 包 模式匹配 样本类 try-catch-finally 关于这节课 最初的几个星期 ...
- Java Spring-AOP的概述
2017-11-08 19:31:23 AOP为Aspect Oriented Programming的缩写,意为:面向切面编程,通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术.AOP ...
- Android 之WebView实现下拉刷新和其他相关刷新功能
最近项目中需要用到WebView下拉刷新的功能,经过查找资料终于完成了此功能,现在拿出来和大家分享一下.希望对大家有所帮助. 效果如下图: 代码: activity.xml <?xml ve ...
- linux三尖刀
序 我们都知道,一个可执行程序的基本的生命过程是如此的: (编辑)源文件--->(编译)目标文件--->(链接)可执行文件--->(调试排错)稳定执行 所以,在这个过程中,我们很容易 ...