Storage的解释 http://www.w3school.com.cn/html5/html_5_webstorage.asp

简单的理解就是:

Storage 有两种:

1、localStorage 永久性存储客户端、除非你删除、修改否则不会消失,存储的体积为5M (《HTML5程序设计》讲其实是可以超过5M只不过有的浏览器会提示有的则不提示.ps:我没测过书上说的)同时数据共享,也就说 其他页面也可以你访问到你存储的数据;

2、sessionStorage 临时性存储在客户端,只要你不关闭当前页面存数数据都在,数据不共享,其真正的用意是为了解决 cookie封堵数据泄露(简单说就是你在这个页面选择A选项 存到了cookie、你又开了同个页面选择B选项存到了cookie、回到A页面提交了选项 但cookie的值其实是B选项不是当前页面的A选项)

根据 jquery.cookie.js 编写了一个 Storage 的jquery 的简单粗鄙库,API 也是根据 cookie 编写:

$.isSession、$.isLocal 判断当前浏览器是否支持 Storage 两个属性的方法 支持为 true 不支持为undefined;

$.storage 存数本地数据的函数:三个参数 name、key、value 三个值 第一个参数为session、local 来分辨存储的是哪一种存储类型 第二参数为 存储的key 值 第三个参数为key对应的value值 如果 value 传的参数为‘’ 则视为删除这组key值,如果只传第一个参数为session、local则返回对应的原生对象 ,如果传了两个参数视为从本地存储里取key值的value,如果没有则返回undefined. 因为低版本的IE不支持Storage 会alert('This browser does NOT support Storage!'),建议如果做低版本的时候先用 $.isSession、$.isLoca 来判断一下客户端是否支持;

$.removeStorage 删除本地存数的key值:两个参数 第一个参数name 传参数session、local 一样分别删除哪种类型的本地存储,第二个参数key 为删除的key名,如果key传入的是‘clearAll’则视为清除全部对应本地存储的key值

$.wachStorage 为时时监控本地存储key的变化函数:一个参数为回调函数

(function (factory) {

    if (typeof define === 'function' && define.amd) {
// AMD
define(['jquery'], factory);
} else if (typeof exports === 'object') {
// CommonJS
factory(require('jquery'));
} else {
// Browser globals
factory(jQuery);
} }(function ($) { function _isStorageText( name ){
if( name ==='session' || name === 'local' ){
return true;
}else{
return false;
}
} var storageBrowser = {}; if( window.sessionStorage ){ storageBrowser.isStorage = true; } if( window.localStorage ){ storageBrowser.isLocal = true; } $.isSession = storageBrowser.isStorage;
$.isLocal = storageBrowser.isLocal; $.storage = function( name,key,value ){ if( !$.isSession || !$.isLocal ){
alert( 'This browser does NOT support Storage!' );
return false;
} if( arguments.length === 1 && !$.isFunction(name) && _isStorageText(name) ){
switch( name )
{
case 'session':
return window.sessionStorage ;
break;
case 'local':
return window.localStorage ;
break;
default: } } if( arguments.length === 2 && !$.isFunction(name) && !$.isFunction(key) && _isStorageText(name) ){
switch( name )
{
case 'session':
return sessionStorage[ key ] ;
break;
case 'local':
return localStorage[ key ] ;
break;
default: }
} if( arguments.length === 3 && !$.isFunction(name) && !$.isFunction(key) && !$.isFunction(value) && _isStorageText(name) ){
switch( name )
{
case 'session':
if ( $.trim(value).length === 0 && !$.isFunction(value)) { return sessionStorage.removeItem(key); }else{ try { return sessionStorage[ key ] = value; }catch(e) {}
}
break;
case 'local':
if ( $.trim(value).length === 0 && !$.isFunction(value)) { return localStorage.removeItem(key); }else{ try { return localStorage[ key ] = value; }catch(e) {} } break;
default: }
} return false; } //删除localStorage 的key值;
$.removeStorage = function( name,key ){ if( arguments.length === 1 && !$.isFunction(name) && _isStorageText(name) ){ return false; } switch( name )
{
case 'session':
if( key === 'clearAll' ){
sessionStorage.clear();
return false;
}else{
return sessionStorage[ key ] ;
} break;
case 'local':
if( key === 'clearAll' ){
localStorage.clear();
return false;
}else{
return localStorage[ key ] ;
}
break;
default: } } //时时监听 Storage 的变化;
$.wachStorage = function( fn ){ if( window.addEventListener ){ window.addEventListener('storage',fn,true); }else{ window.attachEvent('storage',fn); } } }));

写了一个小小DEMO 数据同步:同时在服务端打开两个以上的页面查看在单页面选的喜欢的水果同步到另外几个相同页面(我没有做兼容,其实就是试试我写的小插件)。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding:0;}
.cent{ width:950px; margin:0 auto;}
li{ list-style:none;}
</style>
<script src="jquery-1.7.2.min.js"></script>
<script src="jquery.storage.js"></script>
<script>
$(function(){ var $checkboxs = $('input:checkbox');
var $spans = $('span');
var $btn = $('#btn');
var $viwMian = $('#viwMian'); // 初始化 判断是否有存储过本地数据
StorageInit();
function StorageInit(){
fnStorage( function(){ if( $.storage('local','fruit') ){ var fruitArr = $.storage('local','fruit').split("&");
for( var j=0,len=fruitArr.length;j<len;j++ ){ for( var i=0,len=$spans.length;i<len;i++ ){ var spanVlue = $spans.eq(i).text(); if( spanVlue == fruitArr[j] ){ $spans.eq(i).prev().attr('checked','checked'); }
}
} } } );
} // 判断浏览器是否支持
function fnStorage( fn ){
if( $.isLocal ){ fn(); }
} //监控函数
function SyncFruit( e ){ if( e.key == 'fruit' ){ for( var i=0,len=$spans.length;i<len;i++ ){
$spans.eq(i).prev().attr('checked',false);
}
var newKey = e.newValue;
if( e.newValue ){ var fruitArr = e.newValue.split("&");
for( var j=0,len=fruitArr.length;j<len;j++ ){ for( var i=0,len=$spans.length;i<len;i++ ){ var spanVlue = $spans.eq(i).text(); if( spanVlue == fruitArr[j] ){ $spans.eq(i).prev().attr('checked','checked'); }
}
}
} }
} //调用的删除
//$.removeStorage('local','clearAll'); //监控的调用
$.wachStorage( SyncFruit ); //多选checkbox的点击事件
$checkboxs.on('click',function(){ var $this = $(this);
var value = $(this).next().text(); if( $this.attr('checked') == 'checked' ){ fnStorage(function(){ if( $.storage('local','fruit') ){ var fruitTxt = $.storage('local','fruit');
fruitTxt += '&'+value;
$.storage('local','fruit',fruitTxt); }else{ $.storage('local','fruit',value); } }); }else{ fnStorage(function(){ var fruitArr = $.storage('local','fruit').split("&");
for( var i=0,len=fruitArr.length;i<len;i++ ){ if( fruitArr[ i ] == value ){
fruitArr.splice(i,1);
} }
var fruitTxt = fruitArr.join("&"); $.storage('local','fruit',fruitTxt); }); }
}); // 确定的提交
$btn.on('click',function(){ fnStorage(function(){ var html = '',
arr = [];
$viwMian.html('');
if( $.storage('local','fruit') ){ var fruitArr = $.storage('local','fruit').split("&"); html += '我选择的有:<br/>'
for( var j=0,len=fruitArr.length;j<len;j++ ){ html+='<p>'+ fruitArr[j] +'</p>'; } $viwMian.append(html); } }); }); });
</script> </head>
<body>
<div class="cent">
<h2>
选出喜欢的水果(多选题):
</h2>
<ul>
<li>
<input type="checkbox"><span>草莓</span>
</li>
<li>
<input type="checkbox"><span>苹果</span>
</li>
<li>
<input type="checkbox"><span>香蕉</span>
</li>
<li>
<input type="checkbox"><span>鸭梨</span>
</li>
<li>
<input type="checkbox"><span>桃子</span>
</li>
<li>
<input type="checkbox"><span>火龙果</span>
</li>
</ul>
<input type="button" value="确认" id="btn"><br/><br/>
<div id="viwMian"> </div>
</div> </body>
</html>

后记:

原本想在做了Storage 的 length 属性 查看存数的个数,后来觉得没啥太大用。。。。

这个小插件写的有点代码繁琐,我感觉还可以在简练一些,不过没想到更好的方式,如果有大神有好方法请告知;

html5 - Storage 本地存储的更多相关文章

  1. HTML5 LocalStorage 本地存储

    HTML5 LocalStorage 本地存储 说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示: 最早的Cookies自然是大家都知道,问题主要就是太小,大概也就 ...

  2. (转载)HTML5 LocalStorage 本地存储

    原文地址:http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html HTML5 LocalStorage 本地存储 说到本地 ...

  3. HTML5的本地存储 LocalStorage

    localStorage顾名思义,就是本地存储的意思,在以前很长一段时间,要想在客户端存 储一些配置及登录信息等数据都只能通过COOKIE或flash的方式,如今html5来临,也 带来了更强大的本地 ...

  4. 【转】HTML5 LocalStorage 本地存储

    原文见:http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html 说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步 ...

  5. html5的本地存储localStorage和sessionStorage

    html5的本地存储localStorage和sessionStorage html5中新增的比较重要的一个功能就是web storage来实现客户端本地存储数据,之前存储数据都是用cookie来实现 ...

  6. HTML5 LocalStorage 本地存储总结

    存储数据的方法就是直接给window.localStorage添加一个属性,例如:window.localStorage.a 或者 window.localStorage["a"] ...

  7. HTML5 LocalStorage 本地存储(转)

    原文:http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html HTML5 LocalStorage 本地存储 说到本地存储 ...

  8. Sencha Touch 2 结合HTML5的本地存储创建数据库实现增、删、改、查

    大家好!我是范范.本人刚接触ST2到现在刚刚两个月,6月1号接的项目,那时才知道有Sencha Touch2这个东西,到现在两个月了期间的幸酸就不说了.今天说说在项目中用到的HTML5的本地存储.可能 ...

  9. sessionStorage html5客户端本地存储之sessionStorage及storage事件

    可以看一下<JavaScript本地存储实践(html5的localStorage和ie的userData)>sessionStorage和上文中提到的localStorage非常相识,方 ...

随机推荐

  1. git的那些事

    前言:记得在想学习git的时候,一直停留在思想的层面,总没有弄清楚它的运行机制,经常与github混淆,还好找到了一个好的教程,带我领略了git的风采 (一)git的优点 git的优点:版本控制在本地 ...

  2. canvas高级篇(转载)移动元素

    本文转载在http://bbs.blueidea.com/thread-2979405-1-1.html 哈哈哈,好骚气!终于解决了我的需求.可以移动canvas内的多个元素 <!DOCTYPE ...

  3. js中数值类型相加变成拼接字符串的问题

    如题,弱类型计算需要先进行转型,例: savNum=parseInt(savNum)+parseInt(num);或者使用 number()转型

  4. sqlalchemy数据库分层操作

    在学习sqlalchemy操作中,最常见的就是如下的示例,一个文件基本上包含了数据库的增删改查.sqlalchemy的具体操作我就不再详细说明了.流程大概是: 定义表 创建数据库引擎 创建表 插入数据 ...

  5. 043、data-packed volume container (2019-03-06 周三)

    参考https://www.cnblogs.com/CloudMan6/p/7203285.html     volume container 的数据归根到底还是在host上,我们能不能把数据完全放到 ...

  6. Nginx 配置反向代理后,页面中取绝对URL地址的问题显示代理端口

    本文有V型知识库提供 upstream tomcat {    server 127.0.0.1:82;} location / {     proxy_pass http://tomcat;} 如上 ...

  7. Oracle 数据库监听配置和服务

    -- 补充说明 如果要远程连接192.168.10.44上的oracle,那么192.168.10.44服务器必须启动TNSListener.(配置文件 listener.ora) PLSQL Dev ...

  8. es6写法

    我们在日常开发中,如果我们使用es5则可以直接在浏览器里面写JavaScript脚本.一点问题也没有. 但是在写es6语法的JavaScript代码的时候,我们就需要引入babel翻译器了. 例如: ...

  9. 使用函数输出水仙花数 (void的用法)

    6-11 使用函数输出水仙花数 (20 分) 水仙花数是指一个N位正整数(N≥3),它的每个位上的数字的N次幂之和等于它本身.例如:153=1​3​​+5​3​​+3​3​​. 本题要求编写两个函数, ...

  10. Java SE之网络爬虫①

    一 需求描述 给一个url,将该url对应网页内的所有的链接查找出来,并补充完整为绝对路径 简易版 /** * * @author Zen Johnny * @date 2018年4月29日 下午11 ...