JSFunction | IT-北北报

localStorage和userdata,兼容的本地持久化存储

2014/11 14 10:11

花了半天时间,在JSFunction中新加入了一个函数,localData,用于完成本地持久化存储。–北北

Demo示例请参见这里–JSFunction/LocalData

众所周知,localStorage是HTML5属性,对于低版本的IE浏览器支持并不是很好,而userdata是window+IE组合的存储解决方案,我们来整合这两者,以达到互补。

localStorage与cookie的区别,cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下。存储大小限制也不同,cookie数据不能超过4k,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。数据有效期不同,sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持;localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。作用域不同,sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;localStorage 在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知机制,可以将数据更新的通知发送给监听者。

userData

语法:

XML

<Prefix: CustomTag ID=sID STYLE=”behavior:url(‘#default#userData’)” />

HTML

<ELEMENT STYLE=”behavior:url(‘#default#userData’)” ID=sID>

Script

object.style.behavior = “url(‘#default#userData’)”

object.addBehavior (“#default#userData”)

 

属性:

expires 设置或者获取 userData behavior 保存数据的失效日期。

XMLDocument 获取 XML 的引用。

 

方法:

getAttribute() 获取指定的属性值。

load(object) 从 userData 存储区载入存储的对象数据。

removeAttribute() 移除对象的指定属性。

save(object) 将对象数据存储到一个 userData 存储区。

setAttribute() 设置指定的属性值。

 

 

localStorage

方法:

localStorage.getItem(key):获取指定key本地存储的值

localStorage.setItem(key,value):将value存储到key字段

localStorage.removeItem(key):删除指定key本地存储的值

localStorage.clear():删除所有本地存储的值

 

Demo示例请参见这里–JSFunction/LocalData

JSFunction-Array-distinct对于鸭式类型的数组去重函数

2014/04 19 11:04

JSFunction这个常用函数库的整理过程中,其实第一次写Array扩展函数的时候就包含了distinct的扩展,但是在api中我并没有公布出来,因为当时只支持对String、Int型的数组进行去重,对于Object类型的数组存在问题;之后又忙于整理ArrayLinq函数,就一直没有去重写这个函数,直到今天我终于花了一些时间吧这个较有意义的函数书写完成,并融合了ArrayLinq的语法支持按字段去重,可以让前端处理数据上更加灵活。 举例说明: 对于数值型数组去重

var intarr = [1, 2, 3, 4, 5, 3, 2]; intarr.distinct();

结果:[1,2,3,4,5] 字符串数组去重

var strarr=["zhangsan","lisi","wangwu","lisi"]; strarr.distinct();

结果:["zhangsan","lisi","wangwu"] 上边两个函数都非常简单易懂,对于下边object类型的数组进行去重,我简要说明一下原理。 对于object我们不能单纯的用等号去判断两个对象是否相等,经朋友提示,需要使用鸭子类型判断方法,学动态语言的都知道一句话:“如果它走起来像鸭子,而且叫起来像鸭子,那么它就是鸭子”,对于Object类型元素,如果它的每一个键值都相等,我们就认为它是同一个对象。原理就是对比Object的每一个键值对是否相等,当然这里用到了一个巧妙的方法,运用递归把所有的键值都展开组成一个字符串,然后去对比是否存在重复的字符串来除去重复的元素。 Object数组去重

var objarr=[{ x: "1", y: "a" } }, {

结果:[{ x: "1", y: "a" } }, { x: "2", y: "b" }] 当然对于上面的数组我们也可以使用ArrayLinq的语法进行按某个字段值进行去重,方法如下。

objarr.distinct(function(item){ return item.y; });

结果:[{ x: "1", y: "a" } }, { x: "2", y: "b" }] Object复合数组去重,对于object下还包含object的数组,我们在鸭子判断的时候递归去调用了鸭子判断方法,可以遍历多级object数组。

var objarr=[{ x: "1", y: { m: 1, n: 2 } }, { x: "2", y: "b" }, { x: "1", y: { m: 1, n: 2 } }];
objarr.distinct();

结果:[{ x: "1", y: { m: 1, n: 2 } }, { x: "2", y: "b" }];

objarr.distinct(function(item){ return item.x; });//按照字段x是否重复进行筛选

结果:[{ x: "1", y: { m: 1, n: 2 } }, { x: "2", y: "b" }];

如果您对这个函数有更好的方法可以实现,可以留言给我,在完善代码的路上有大家的支持才能走的更远,写的更好。--北北

JSFunction-javascript常用函数库整理的心路历程

2014/04 16 09:04

这些天一直忙于整理JSFunction,它像我孕育的一个新生儿.

Javascript常用函数库

JSFunction是对Javascript常用函数的整理总结,它依赖于jQuery,其中包含了我们经常用到,但是jQuery又没有提供的方法。

目前压缩后的JSFunction.min.js仅仅12kb,而却包含了cookie、browser的常用操作,String、Date、Array的扩展,Array中还加入了类似Linq的结构化查询方法,Url参数的捕获,表单数据抓取转换,之后还会完善一些$.fn的常用函数,如果你觉得这些对你的开发有所用处,可以尝试使用JSFunction。

当你用心去做一件事的时候,才会发现其中的乐趣,举例说明:

1. 开始我写jQuery是Jquery,把”J”字母大写,后来反复查阅api的过程中,发现更为严谨官方的写法是jQuery,于是就改正了,有时候可能就是这样不经意的细节影响了整个API的质量,我会在API的阅读性上付出点滴努力;

2. 再比如之前写的判断浏览器内核的代码判断IE的标准是userAgent中含有msie标记,但是新发行的IE11中已经把这个标记(msie)去掉了,所以之前很多网站常用的$. browser.msie已经不好用了,所以在新的代码中做出了修正;

3. 每一个函数的执行我都会亲手测试IE6到IE11、chrome、Firefox等主流浏览器,这其中会发现很多问题,很多之前的代码随着浏览器的发展已经不再好用,所以在新的JSFunction中做出了相应的修正。

虽然目前我还不能保证每一个函数的书写是正确而完美的,但是我正在付出努力去完善它,优化它,而这将成为我近期的主要工作之一,很希望大家一起参与其中,发现问题,解决问题,一起打造一个底层的常用函数库。

希望可以用优雅的代码净化你的编程环境,因热爱,而改变。–北北



无觅相关文章插件,快速提升流量