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. Redis之路

    前言:数据库是一切数据的源头,因此我们没有逃避的理由 (一) 什么是redis? redis是nosql(not noly sql)产品中最为出色的一种非关系型的数据库,主要包括以下几种存储结构:St ...

  2. [Android] Sqlite 数据库操作 工具封装类

    sqlite 数据库封装类 DatabaseUtil.java(封装的类) package com.jack.androidbase.tools; import android.content.Con ...

  3. 向JSP中静态导入HTML文件时,运行jsp时,html中中文产生乱码问题最简单的解决方法

    在保证其他的编码格式一致的情况下 在html标签内,head标签外添加一下代码时可以完美解决 亲测 <%@page pageEncoding="UTF-8"%>

  4. Multiple vulnerabilities in DASAN H660RM GPON router firmware

    CVE-2019-9974: diag_tool.cgi on DASAN H660RM devices with firmware 1.03-0022 allows spawning ping pr ...

  5. luogu P4363 [九省联考2018]一双木棋chess

    传送门 对抗搜索都不会,我真是菜死了qwq 首先根据题目条件,可以发现从上到下每一行的棋子数是单调不增的,然后n m都比较小,如果把状态搜出来,可以发现合法状态并不多,所以可以用一个11进制数表示状态 ...

  6. luogu P4099 [HEOI2013]SAO

    传送门 吐槽题目标题 这个依赖关系是个树,可以考虑树型dp,设f_i表示子树i的答案 因为这是个序列问题,是要考虑某个数的位置的,所以设\(f_{i,j}\)表示子树i构成的序列,i在第j个位置的方案 ...

  7. Tomcat7基于redis的session共享

    一,项目需求 因开发人员在登录后台时需要反复认证,tomcat反复切换,所以给运维组提出需求,解决session共享问题. 二,解决方法 环境:基于Centos6.8 Jdk 版本   java ve ...

  8. jinja模板语法

    模板 要了解jinja2,那么需要先理解模板的概念.模板在Python的web开发中广泛使用,它能够有效的将业务逻辑和页面逻辑分开,使代码可读性增强.并且更加容易理解和维护. 模板简单来说就是一个其中 ...

  9. centos6.8安装python3.7无法import _ssl

    转载https://www.jianshu.com/p/ace9be0b08ed 公司运维提供的服务器是centos6.8,打算在上面装python3.7,结果费尽周折,按照网上的步骤python3. ...

  10. 前端必备——js中前端与后台的数据交互全解

    只要编程语言能够支持网卡端口的监听和发送,理论上都是可以实现服务器后台设计的.也因此造成了实现后台的语言偏多,而web前端语言以html/css/js为主.所以在这里我们不涉及后台的设计,只介绍在we ...