首页手记学习html5存储数据和缓存

学习html5存储数据和缓存

标签：

Html5

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

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

setitem(key,value);添加本地存储数据
getitem(key); 通过key获取相应的value;
removeitem(key);通过key删除本地数据
clear();清空数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html5缓存</title>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://libs.baidu.com/jquery/1.9.1/jquery.js" type="text/javascript"></script>
</head>
<style type="text/css">
    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;}
</style>
<body>
    <section id="section">
        <p>我爱谁 跨不过 从来也不觉得错</p>
        <p>自以为 抓着痛 就能往回忆里躲</p>
        <p>偏执相信着 受诅咒的水晶球</p>
        <p>阻挡可能心动的理由</p>
        <p>而你却 靠近了 逼我们视线交错</p>
        <p>原地不动 或像前走 突然在意这分钟</p>
        <p>眼前黄沙弥漫了等候</p>
        <p>耳边传来孱弱的呼救</p>
        <p>追赶要我爱的不保留</p>
        <p>我身骑白马 走三关</p>

    </section>
    <div class="div1">
        <p>字体 <button id="large_button">放大</button> <button id="small_button">缩小</button></p>
        <div><span>背景色</span> <div class=" bg bg1"></div><div class=" bg bg2"></div></div>
    </div>

    <!-- 闭包处理 (function(){})();-->
    <script type="text/javascript">

        // 封装一个函数  --开始---
        (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();
        })();

    </script>
</body>
</html>

点击查看更多内容