本地存储localStorage以及它的封装接口store.js的使用

本地存储localstorage

localstorage 是 HTML5 提供的在客户端存储数据的新方法,主要作用是将数据保存在客户端中,并且数据是永久保存的,除非人为干预删除。

localstorage作为本地存储来使用,解决了cookie存储空间不足的问题:cookie中每条cookie的存储空间为4k,但localStorage的存储空间有5M大小。另外,相比于cookie,localStorage可以节约带宽,在同一个域内,浏览器每次向服务器发送请求,http都会带着cookie,使cookie在浏览器和服务器之间来回传递,浪费带宽,但localStorage将第一次请求的数据直接存储到本地,避免了来回传递。

localstorage 的局限
1、只有版本较高的浏览器中才支持 localstorage
2、localStorage的值的类型限定为string类型,使用 JSON 时需转换
3、如果存储内容过多会消耗内存空间,导致页面变卡,因为localStorage本质上是对字符串的读取

localstorage 有两种方法:分别是 localstorage 和 sessionStorage 。sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除。localStorage与sessionStorage的唯一区别就是localStorage属于永久性存储,而sessionStorage在当会话结束的时候,sessionStorage中的键值对会被清空。

localstorage的用法
我们在使用localStorage的时候,需要先判断浏览器是否支持localStorage这个属性:

if(window.localStorage){
 alert("浏览器支持localStorage");

 }else{
 alert("浏览器支持localStorage");
 }?

接下来分别是它的写入、读取、删除

//localStorage的写入
var storage=window.localStorage;
 storage["a"]=1;   //写入a字段
 storage.b=2;   //写入b字段
 storage.setItem("c",3);   //写入c字段
 console.log(typeof storage["a"]);  //string
 console.log(typeof storage["b"]);  //string
 console.log(typeof storage["c"]);?//string
//localStorage的读取
var a=storage.a;
 console.log(a);  //1
var b=storage["b"];
 console.log(b);  //2
var c=storage.getItem("c");
 console.log(c);?  //3
//localStorage的删除
storage.clear();  //将localStorage的所有内容清除

使用key()方法,获取相应的键

var storage=window.localStorage;
 storage.a=1;
 storage.setItem("c",3);
 for(var i=0;i<storage.length;i++){
 var key = storage.key(i);
 console.log(key);  //a  c
 }?

对用户访问页面的次数进行计数:

if(localStorage.pagecount){
 localStorage.pagecount = Number(localStorage.pagecount)+1;
 }else{
 localStorage.pagecount = 1;
 }
 document.write("你第"+localStorage.pagecount+"访问该页面");?

sessionStorage的用法和localStorage一样用法和localStorage一样,但是关闭计数页面后再打开时会重新开始计数。

store.js

store.js 是一个兼容所有浏览器的 LocalStorage 包装器,不需要借助 Cookie 或者 Flash来实现。它提供非常了简洁的 API 来实现跨浏览器的本地存储功能。

store.js的使用

store.js的基本API有:

store.set(key, val)  //存储 key 的值为 val;
store.get(key)  //获取 key 的值;
store.remove(key) //移除 key 的记录;
store.clear()  //清空存储;
store.getAll() //返回所有存储;
store.forEach() //遍历所有存储。

使用store.js提供的方法,需要先引入store.min.js插件:

<script type="text/javascript" src="store.min.js"></script>

首先判断浏览器是否支持本地存储

<script type="text/javascript">
    init();
    function init(){
        if(!store.enabled){
            alert("你的浏览器不支持本地存储,请使用更高版本的浏览器");
            return;
        }else{
            ......
            }
 </script>  

set
单个存储字符
格式:store.set(key, data[, overwrite]);

store.set(‘name‘,‘mavis‘); //存储name的值为 mavis
store.set(‘name‘,‘angel‘);  //将name的值存储为angel

在控制台显示

get
获取存入的key值
格式:store.get(key[, alt])

store.set(‘name‘,‘mavis‘);
store.set(‘name‘,‘angel‘);
store.get(‘name‘);  //angel

remove
移除key的记录

store.remove(‘name‘);

在控制台可以看到name的值已经被移除

clear
清除所有本地存储:store.clear();

getAll
从所有存储中获取值
格式:store.getAll()

store.set(‘name‘,‘mavis‘);
store.getAll().user.name == ‘mavis‘;   //true

forEach
遍历所有的值

store.set(‘user‘,{name:‘mavis‘,likes:‘javascript‘}); // 存储对象 - 自动调用 JSON.stringify
var user = store.get(‘user‘); // 获取存储的对象 - 自动执行 JSON.parse
store.forEach(function(key, val) {
                  console.log(key, ‘==‘, val)
            })  // 遍历所有存储

使用store,js简化了使用localStorage原生方法的操作

LocalStorage 并没有提供过期时间接口,只能通过存储时间做比对实现。

时间: 2024-10-20 22:02:33

本地存储localStorage以及它的封装接口store.js的使用的相关文章

HTML5本地存储LocalStorage和sessionStorage

以前用wordpress做博客的时候,我做了个点赞的功能.设计这个点赞功能的时候,为防止访客不断刷赞,得做个时间间隔限制,首先我的设计方案是在数据库里记录ip和点赞的时间,后来一想那还得维护数据库(其实是觉得都没人点赞还弄得那么严格搞什么),果断改成把数据放到本地保存. 本地存储数据首先想到得是cookie和html5的 localStorage. cookie兼容性好,但是存储的数据量太少;localStorage存储量大,但是兼容性不是很好,毕竟ie6之流还是有不少份额的.最后考虑到 htm

本地存储(localStorage、sessionStorage、web Database)

一.sessionStorage和localStorage sessionStorage和localStorage两种方法都是当用户在inPut文本框中输入内容并点击保存数据按钮时保存数据,点击读取数据按钮时读取保存后的数据.不过使用sessionStorage时,只能局限于当前页面,如果关闭浏览器,数据就会丢失,下次打开浏览器就会读不到数据.如果使用localStorage时,即使浏览器关闭,下次打开浏览器仍能读取到上次被保存的数据.但是数据的保存时按不同浏览器分别进行的,也就是说,如果打开别

HTML5本地存储localStorage、sessionStorage及IE专属UserData

By:王美建 from:http://www.cnblogs.com/wangmeijian/p/4518606.html 转载请保留署名和出处! 在客户端存储数据用的最普遍的方式非cookie莫属,随着HTML5的普及,新的本地存储方式localStorage和sessionStorage将在标准浏览器上大展身手.localStorage和sessionStorage是HTML5的新特性之一,说是新特性,其实微软公司早在IE8上就已经支持localStorage和sessionStorage这

HTML5本地存储 localStorage

HTML5的本地存储是大势所趋,如果仅存储在内存中,则是sessionStorage,他们的语法都是一样,仅仅是一个存储在本地文件系统中,另一个存储在内存中(随着浏览器的关闭而消失),其语句如下: localStorage.setItem('a', 'xxxxxx'); // 设置 localStorage.getItem('a'); // 获取 localStorage.removeItem('a'); // 删除 下面说说有关localStorage和sessionStorage的特性. 1

objective-c ios webkit 本地存储local-storage

我有一个Cocoa / Objective-C的应用程序,它嵌入了一个WebKit的web视图.我需要打开的数据库支持和本地存储.我知道这是可以做到-我有它在Safari中工作-但我无法找到如何设置这在我自己的应用程序的示例. 我发现这个(未回答)问题的SO它提供了一个例子,但正如原来不起作用.而事实上,(setDatabasesEnabled,setLocalStorageEnabled)没有在我的WebKit的定义. (Xcode的3.2.5),尽管它们似乎存在,如果我定义他们自己. 任何人

HTML5本地存储localStorage与sessionStorage

在最近的项目中用到了html5的本地存储,下面总结一下. 1.html5几种存储形式 本地存储(localStorage && sessionStorage) 离线缓存(application cache) indexedDB 和 webSQL 2.localStorage && sessionStorage 过期时间:localStorage 永久存储,永不失效除非手动删除 sessionStorage 浏览器重新打开后就消失了 大小:每个域名是5M. 注:cookie一

一起来做chrome扩展《本地存储localStorage》

chrome中的本地存储其实也是用的HTML5中localStorage,唯一区别是chrome扩展有自己的localStorage,它属于这个扩展,而不属于一个域名.得用这一点可以很好的处理扩展自己的一些数据,而不受访问网站和域名的影响. localStorage基础 localStorage是HTML5特性,所以有些浏览器不一定支持,不过我们这里讲的是chrome扩展,所以完全不用担心这个问题.如果想在WEB页面上使用,那就要检查一下是不是支持它 可以这样的检测: if(window.loc

HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等

HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localStorage 则会一直保存.我们这里以 localStorage 为例,简要介绍下 HTML5 的本地存储,并针对如遍历等常见问题作一些示例说明. localStorage 是 HTML5 本地存储的 API,使用键值对的方式进行存取数据,存取的数据只能是字符串.不同浏览器对该 API 支持情况有所差

HTML5 本地存储 LocalStorage

说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示: 最早的Cookies自然是大家都知道,问题主要就是太小,大概也就4KB的样子,而且IE6只支持每个域名20个cookies,太少了.优势就是大家 都支持,而且支持得还蛮好.很早以前那些禁用cookies的用户也都慢慢的不存在了,就好像以前禁用javascript的用户不存在了一样. userData是IE的东西,垃圾.现在用的最多的是Flash吧,空间是Cookie的25倍,基本够用.再之后Google推出了