$(function(){
loaddata(); //Load the saved data
// function loadData
function loaddata() {
$('#data').html(localStorage.mydata);
}
$("#sendAll").click(function() {
// template data
var name = $('#name').val();
var story = $('#story').val();
var data = '<h3>' + name + '</h3>' +
'<p>' + story + '</p>';
localStorage.mydata = data;
// convert to html
$('#data').html(localStorage.mydata);
// view in console
console.log(localStorage.mydata);
// sucess
$.jnotify('Save data in local storage', 500);
return false;
});
// call local storage plugin
$('#form').sisyphus({
customKeyPrefix: 'data_form', //data prefix
timeout: 10, // in seconds
onSave: function() {$.jnotify('Data form saved to Local Storage', 1000);},
onRestore: function() {$.jnotify('Data form restore from Local Storage', 'warning', 1000);}
});
});
(function() {
var contents = $('iframe').contents(),
body = contents.find('body'),
styleTag = $('<style></style>').appendTo(contents.find('head'));
$('textarea').keyup(function() {
var $this = $(this);
if ( $this.attr('id') === 'html') {
body.html( $this.val() );
} else {
// it had to be css
styleTag.text( $this.val() );
}
});
return false;
})();
(function(){
var video = $('.video-click'),
audio = $('.audio-click'),
photo = $('.photo-click'),
reload = $('.reload-click');
video.click(function(){
$('#story').html('<video width="100%" height="240" controls="controls">' +
'<source src="https://dl.dropbox.com/u/23834858/videos/urquiola.mp4" type="video/mp4" />' +
'<source src="movie.ogg" type="video/ogg" />'+
'Only for crome sorry'+
'</video>'+
'<!-- type something for run -->');
$('input[id][name$="name"]').val('This is a video snippet click in save bottom');
});
audio.click(function(){
$('#story').html('<audio controls="controls">' +
'<source src="horse.ogg" type="audio/ogg" />' +
'<source src="http://myinstants.com/media/sounds/psy-gangnam-style-1.mp3" type="audio/mp3" />'+
'Only for crome sorry.'+
'</audio>'+
'<!-- type something for run -->');
$('input[id][name$="name"]').val('This is a audio snippet click in save bottom');
});
photo.click(function(){
$('#story').html('<img src="https://dl.dropbox.com/u/23834858/fotos/1912.%20Plano%20Biblioteca%20Nacional.jpg" width="100%" height="300px"/>');
$('input[id][name$="name"]').val('This is a img snippet click in save bottom');
});
reload.click(function(){
window.location.reload();
});
})();
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Save data in loacl storage</title>
<!-- Css -->
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.0/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container"><div class="row"><div class="span12">
<!-- ======================== Html ============================= -->
<div class="main">
<div class="header">
<h3>Save your data in local storage </h3>
<h5>Try to refressh or open in other tab</h5>
<hr><br>
</div>
<ul class="button-bar">
<li><a href="#" class="video-click" ><span class="icon gray medium" data-icon="2"></span> Video</a></li>
<li><a href="#" class="audio-click" ><span class="icon gray medium" data-icon="3"></span> Audio</a></li>
<li><a href="#" class="photo-click" ><span class="icon gray medium" data-icon="0"></span> Photo</a</li>
<li><a href="#" class="reload-click"><span class="icon gray medium" data-icon=";"></span> Refresh</a></li>
</ul>
<!-- Display data from local store -->
<div id="data"></div>
<div class="well">
<form class="form "name="" id="form" method="get">
<label for="name" class="label label-important">Title of story</label>
<input type="text" name="name" value="" id="name" class="input-xlarge" placeholder="Your title..">
<label for="story" class="label label-important">Story</label>
<textarea name="description" cols="50" rows="10" id="story" class="input-xlarge"placeholder="you Story.."></textarea>
<input class="btn" type="button" value="Save Data" id="sendAll"><br><br>
</form>
</div>
</div>
<!-- ======================== Html ============================= -->
</div></div></div>
<!-- Call JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.0/js/bootstrap.min.js"></script>
<script src="autosave.js"></script>
<script src="script.js"></script>
</body>
</html>
.header{
text-align: center;
background: #3D3D3D;
padding: 5px;
color: #929292;
margin: 0;
}
.header hr {
border: 2px solid #4D4D4D;
box-shadow: 0 1px 1px black;
}
.button-bar{
list-style: none;
background: rgb(238, 238, 238);
margin: 0;
padding: 4px;
text-align: center;
}
.button-bar li{
display: inline-block;
margin-left: 10px;
margin-right: 10px;
}
.button-bar li a{
padding: 5px;
color: black;
text-decoration: none;
}
.button-bar li a:hover{color:red;}
#form input,#form textarea{width:100%;}
textarea {width: 100%;height: 200px;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;border-color: #999;}
.grid {width: 50%;float: left;overflow: hidden;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;padding: 30px 30px;}
.container {background: #e3e3e3;border-right: 1px solid white;}
.output {border-left: 1px solid #e3e3e3;overflow: hidden;background:#5E5E5E;}
.output iframe{ border: none;width: 100%;background: #E6E6E6;height: 566px;}
.jnotify-container{position:fixed;top:0;left:0;width:100%;z-index:100000;}.jnotify-container .jnotify-notification{position:relative;}.jnotify-container .jnotify-notification .jnotify-background{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#e3f0db;filter:alpha(opacity=90);-moz-opacity:.90;opacity:.90;z-index:1;}.jnotify-container .jnotify-notification a.jnotify-close,.jnotify-container .jnotify-notification a.jnotify-close:link,.jnotify-container .jnotify-notification a.jnotify-close:visited,.jnotify-container .jnotify-notification a.jnotify-close:focus,.jnotify-container .jnotify-notification a.jnotify-close:hover{position:absolute;top:2px;right:5px;padding:0 5px;font:bold 1.4em Arial,Helvetica,sans-serif;line-height:1em;color:#567b1b;text-decoration:none;z-index:3;cursor:pointer;}.jnotify-container .jnotify-notification .jnotify-message{position:relative;z-index:2;padding:20px;text-align:center;color:#567b1b;font:bold 1.4em Arial,Helvetica,sans-serif;line-height:1.2em;}.jnotify-container .jnotify-notification .jnotify-message *{font-size:1em !important;}.jnotify-container .jnotify-notification-error .jnotify-background{background-color:#d79eac;}.jnotify-container .jnotify-notification-error .jnotify-close,.jnotify-container .jnotify-notification-error .jnotify-message{color:#a72947!important;}.jnotify-container .jnotify-notification-warning .jnotify-background{background-color:#fff7d1;}.jnotify-container .jnotify-notification-warning .jnotify-close,.jnotify-container .jnotify-notification-warning .jnotify-message{color:#c2a928!important;}
/*
* jNotify jQuery Plug-in
*
* Copyright 2010 Giva, Inc. (http://www.givainc.com/labs/)
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
* Date: 2010-09-30
* Rev: 1.1.00
*/
(function(B){B.jnotify=function(K,M,L){return new C(K,M,L)};B.jnotify.version="1.1.00";var J,D=[],E=0,H=false,I=false,G,F,A={type:"",delay:2000,sticky:false,closeLabel:"×",showClose:true,fadeSpeed:1000,slideSpeed:250,classContainer:"jnotify-container",classNotification:"jnotify-notification",classBackground:"jnotify-background",classClose:"jnotify-close",classMessage:"jnotify-message",init:null,create:null,beforeRemove:null,remove:null,transition:null};B.jnotify.setup=function(K){A=B.extend({},A,K)};B.jnotify.play=function(M,N){if(H&&(M!==true)||(D.length==0)){return }H=true;var L=D.shift();F=L;var K=(arguments.length>=2)?parseInt(N,10):L.options.delay;G=setTimeout(function(){G=0;L.remove(function(){if(D.length==0){H=false}else{if(!I){B.jnotify.play(true)}}})},K)};B.jnotify.pause=function(){clearTimeout(G);if(G){D.unshift(F)}I=H=true};B.jnotify.resume=function(){I=false;B.jnotify.play(true,0)};function C(P,N){var M=this,K=typeof N;if(K=="number"){N=B.extend({},A,{delay:N})}else{if(K=="boolean"){N=B.extend({},A,{sticky:true})}else{if(K=="string"){N=B.extend({},A,{type:N,delay:((arguments.length>2)&&(typeof arguments[2]=="number"))?arguments[2]:A.delay,sticky:((arguments.length>2)&&(typeof arguments[2]=="boolean"))?arguments[2]:A.sticky})}else{N=B.extend({},A,N)}}}this.options=N;if(!J){J=B('<div class="'+A.classContainer+'" />').appendTo("body");if(B.isFunction(N.init)){N.init.apply(M,[J])}}function O(S){var R='<div class="'+N.classNotification+(N.type.length?(" "+N.classNotification+"-"+N.type):"")+'"><div class="'+N.classBackground+'"></div>'+(N.sticky&&N.showClose?('<a class="'+N.classClose+'">'+N.closeLabel+"</a>"):"")+'<div class="'+N.classMessage+'"><div>'+S+"</div></div></div>";E++;var Q=B(R);if(N.sticky){Q.find("a."+N.classClose).bind("click.jnotify",function(){M.remove()})}if(B.isFunction(N.create)){N.create.apply(M,[Q])}return Q.appendTo(J)}this.remove=function(U){var Q=L.find("."+N.classMessage),S=Q.parent();var R=E--;if(B.isFunction(N.beforeRemove)){N.beforeRemove.apply(M,[Q])}function T(){S.remove();if(B.isFunction(U)){U.apply(M,[Q])}if(B.isFunction(N.remove)){N.remove.apply(M,[Q])}}if(B.isFunction(N.transition)){N.transition.apply(M,[S,Q,R,T,N])}else{Q.fadeTo(N.fadeSpeed,0.01,function(){if(R<=1){T()}else{S.slideUp(N.slideSpeed,T)}});if(E<=0){S.fadeOut(N.fadeSpeed)}}};var L=O(P);if(!N.sticky){D.push(this);B.jnotify.play()}return this}})(jQuery);
// sisyphus Gmail-like client-side drafts and bit more http://simsalabim.github.com/sisyphus/
(function(a){a.sisyphus=function(){return Sisyphus.getInstance()},a.fn.sisyphus=function(a){var b=Sisyphus.getInstance();return b.setOptions(a),b.protect(this),b};var b={};b.isAvailable=function(){if("object"==typeof a.jStorage)return!0;try{return localStorage.getItem}catch(b){return!1}},b.set=function(b,c){if("object"==typeof a.jStorage)a.jStorage.set(b,c+"");else try{localStorage.setItem(b,c+"")}catch(d){}},b.get=function(b){if("object"==typeof a.jStorage){var c=a.jStorage.get(b);return c?""+c:c}return localStorage.getItem(b)},b.remove=function(b){"object"==typeof a.jStorage?a.jStorage.deleteKey(b):localStorage.removeItem(b)},Sisyphus=function(){function d(){return{setInitialOptions:function(c){var d={excludeFields:[],customKeyPrefix:"",timeout:0,autoRelease:!0,name:null,onSave:function(){},onBeforeRestore:function(){},onRestore:function(){},onRelease:function(){}};this.options=this.options||a.extend(d,c),this.browserStorage=b},setOptions:function(b){this.options=this.options||this.setInitialOptions(b),this.options=a.extend(this.options,b)},protect:function(b){b=b||{};var d=this;return this.targets=this.targets||[],this.href=this.options.name||location.hostname+location.pathname+location.search+location.hash,this.targets=a.merge(this.targets,b),this.targets=a.unique(this.targets),this.targets=a(this.targets),this.browserStorage.isAvailable()?(d.restoreAllData(),this.options.autoRelease&&d.bindReleaseData(),c.started||(d.bindSaveData(),c.started=!0),void 0):!1},bindSaveData:function(){var b=this;b.options.timeout&&b.saveDataByTimeout(),b.targets.each(function(){var c=a(this).attr("id"),d=a(this).find(":input").not(":submit").not(":reset").not(":button").not(":file");d.each(function(){if(-1!==a.inArray(this,b.options.excludeFields))return!0;var d=a(this),e=b.href+c+d.attr("name")+b.options.customKeyPrefix;d.is(":text")||d.is("textarea")?b.options.timeout||b.bindSaveDataImmediately(d,e):b.bindSaveDataOnChange(d,e)})})},saveAllData:function(){var b=this;b.targets.each(function(){var c=a(this).attr("id"),d=a(this).find(":input").not(":submit").not(":reset").not(":button").not(":file");d.each(function(){var d=a(this);if(-1!==a.inArray(this,b.options.excludeFields)||void 0===d.attr("name"))return!0;var e=b.href+c+d.attr("name")+b.options.customKeyPrefix,f=d.val();d.is(":checkbox")?(-1!==d.attr("name").indexOf("[")?(f=[],a("[name='"+d.attr("name")+"']:checked").each(function(){f.push(a(this).val())})):f=d.is(":checked"),b.saveToBrowserStorage(e,f,!1)):d.is(":radio")?d.is(":checked")&&(f=d.val(),b.saveToBrowserStorage(e,f,!1)):b.saveToBrowserStorage(e,f,!1)})}),a.isFunction(b.options.onSave)&&b.options.onSave.call()},restoreAllData:function(){var b=this,c=!1;a.isFunction(b.options.onBeforeRestore)&&b.options.onBeforeRestore.call(b),b.targets.each(function(){var d=a(this),e=d.attr("id"),f=d.find(":input").not(":submit").not(":reset").not(":button").not(":file");f.each(function(){if(-1!==a.inArray(this,b.options.excludeFields))return!0;var d=a(this),f=b.href+e+d.attr("name")+b.options.customKeyPrefix,g=b.browserStorage.get(f);g&&(b.restoreFieldsData(d,g),c=!0)})}),c&&a.isFunction(b.options.onRestore)&&b.options.onRestore.call()},restoreFieldsData:function(a,b){return void 0===a.attr("name")?!1:(a.is(":checkbox")&&"false"!==b&&-1===a.attr("name").indexOf("[")?a.attr("checked","checked"):a.is(":checkbox")&&"false"===b&&-1===a.attr("name").indexOf("[")?a.removeAttr("checked"):a.is(":radio")?a.val()===b&&a.attr("checked","checked"):-1===a.attr("name").indexOf("[")?a.val(b):(b=b.split(","),a.val(b)),void 0)},bindSaveDataImmediately:function(b,c){var d=this;a.browser.msie===void 0?b.get(0).oninput=function(){d.saveToBrowserStorage(c,b.val())}:b.get(0).onpropertychange=function(){d.saveToBrowserStorage(c,b.val())}},saveToBrowserStorage:function(b,c,d){d=null===d?!0:d,this.browserStorage.set(b,c),d&&""!==c&&a.isFunction(this.options.onSave)&&this.options.onSave.call()},bindSaveDataOnChange:function(a){var c=this;a.change(function(){c.saveAllData()})},saveDataByTimeout:function(){var a=this,b=a.targets;setTimeout(function(){function c(){a.saveAllData(),setTimeout(c,1e3*a.options.timeout)}return c}(b),1e3*a.options.timeout)},bindReleaseData:function(){var b=this;b.targets.each(function(){var d=a(this),e=d.find(":input").not(":submit").not(":reset").not(":button").not(":file"),f=d.attr("id");a(this).bind("submit reset",function(){b.releaseData(f,e)})})},manuallyReleaseData:function(){var b=this;b.targets.each(function(){var d=a(this),e=d.find(":input").not(":submit").not(":reset").not(":button").not(":file"),f=d.attr("id");b.releaseData(f,e)})},releaseData:function(b,c){var d=!1,e=this;c.each(function(){if(-1!==a.inArray(this,e.options.excludeFields))return!0;var c=a(this),f=e.href+b+c.attr("name")+e.options.customKeyPrefix;e.browserStorage.remove(f),d=!0}),d&&a.isFunction(e.options.onRelease)&&e.options.onRelease.call()}}}var c={instantiated:null,started:null};return{getInstance:function(){return c.instantiated||(c.instantiated=d(),c.instantiated.setInitialOptions()),c.instantiated},free:function(){return c={},null}}}()})(jQuery);