html缓存数据,学习html5存储数据和缓存

html5存储

sessionStorage 会话级别的本地存储，会话结束后数据就是自动清除

localStorage 永久本地存储

sessionStorage与localStorage都有四个方法来对本地存储进行操作

setitem(key,value);添加本地存储数据

getitem(key); 通过key获取相应的value;

removeitem(key);通过key删除本地数据

clear();清空数据

html5缓存

section{width: 600px;margin: 0 auto;border: 1px solid #000;box-shadow: 0px 5px 10px #c3edf3;border-radius: 4px;background: #e9dfc7;}

section p {text-align: center;}

div{display: inline-block;}

.bg{width: 20px;height: 20px;border-radius: 10px;border:1px solid #000;margin: 5px;vertical-align: middle;}

.bg1{background: rgb(40, 53, 72);}

.bg2{background:#e9dfc7; }

.div1{text-align: center;display: block;}

我爱谁 跨不过 从来也不觉得错

自以为 抓着痛 就能往回忆里躲

偏执相信着 受诅咒的水晶球

阻挡可能心动的理由

而你却 靠近了 逼我们视线交错

原地不动 或像前走 突然在意这分钟

眼前黄沙弥漫了等候

耳边传来孱弱的呼救

追赶要我爱的不保留

我身骑白马 走三关

字体 放大 缩小

背景色

// 封装一个函数 --开始---

(function(){

//存储数据

var Util=(function(){

//封装一个类，作为key的前缀

var pirfix='html5_reader';

//获取key在本地的存储值

var stroageGet=function(key) {

return localStorage.getItem(pirfix+key);

}

//讲value存进key字段

var stroageSet=function(key,value){

return localStorage.setItem(pirfix+key,value);

}

return{

stroageGet:stroageGet,

stroageSet:stroageSet

}

})();

//封装一个函数 ---结束---

//定义一些变量

var bgColor;

var textColor;

//存储字体的大小 --开始--

//字体要放大的容器id

var Rootcontainer=$('#section');

//取存储的字体大小，是一串字符串

var initFontsize=Util.stroageGet('font-size');

//转换为数字

initFontsize=parseInt(initFontsize);

//如果没有存储的字体，就设置初始字号

if(!initFontsize){

initFontsize=14;

}

Rootcontainer.css('font-size',initFontsize);

//存储字体的大小 --结束--

//存储背景色和字体颜色

textColor=Util.stroageGet('color');

$('#section p').css('color',textColor);

bgColor=Util.stroageGet('background');

Rootcontainer.css('background',bgColor);

//交互数据的绑定

function EvantHeader(){

//放大字体

$('#large_button').click(function() {

if(initFontsize>20){

return;

}

initFontsize+=1;

Rootcontainer.css('font-size',initFontsize);

Util.stroageSet('font-size',initFontsize);

});

//缩小字体

$('#small_button').click(function() {

if(initFontsize<12){

return;

}

initFontsize-=1;

Rootcontainer.css('font-size',initFontsize);

Util.stroageSet('font-size',initFontsize);

});

//改变背景颜色和字体颜色

$('.bg1').click(function() {

bgColor='rgb(40, 53, 72)';

textColor='#fff';

$('#section p').css('color',textColor);

Util.stroageSet('color',textColor);

Rootcontainer.css('background',bgColor);

Util.stroageSet('background',bgColor);

});

$('.bg2').click(function() {

bgColor='#e9dfc7';

textColor='#000';

Rootcontainer.css('background',bgColor);

Util.stroageSet('background',bgColor);

$('#section p').css('color',textColor);

Util.stroageSet('color',textColor);

});

}

EvantHeader();

})();