html5-本地存储LocalStorage和range、output的结合

最新推荐文章于 2024-07-19 11:00:40 发布

转载最新推荐文章于 2024-07-19 11:00:40 发布 · 130 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lufy/archive/2012/05/16/2504030.html

本文介绍如何使用HTML5的滑块(input type='range')与localStorage实现数据持久化。通过JavaScript监听滑块变化，实时更新显示值，并在用户操作结束后将值存储到localStorage。清除按钮用于重置值。

$(function(){

    var $range = $("input[type='range']");    //滑块
    
    var $result = $("output[name='result']");//显示数字的output
    
    var $button = $("input[type='button']");//清除按钮
    
    $range.val(localStorage.rangeValue);    //页面载入时$range的值为localStorage.rangeValue存诸的值；
    
    $result.val(localStorage.rangeValue);    //页面载入时$result的值为localStorage.rangeValue存诸的值；
    
    //当$range滑动时,将值传给$result，显示出来
    $range.change(function(){
        $result.val($range.val());
    })
    
    //当$range停止滑动时，将值赋给本地存储localStorage.rangeValue
    $range.mouseup(function(){
        localStorage.rangeValue = $range.val();
    })
    
    //点击后，将本地存储localStorage.rangeValue的值设为0
    $button.click(function(){
        localStorage.setItem("rangeValue","0")
    })
})

input[type="range"]:before{
    padding-left:5px;
    content:attr(min);}
    
input[type="range"]:after{
    padding-right:5px;
    content:attr(max);
    }
    
output[name="result"]{
    display: block; font-size: 5.5em; font-weight: bold; 
    }

<input type="range" name="range" min="0" max="10" step="1" value="123"/><output name="result"></output><input type="button" value="清除" />

localStorage本地存储，和cookie理解一样的，只是大小不一样，而且使用也方便一些；

上例，1.滑动后，刷新页面将还保存了当前值。

　　　2.点击清除后，再刷新，就会初始化这个数值；

HTML5本地存储只能存字符串，任何格式存储的时候都会被自动转为字符串，所以读取的时候，需要自己进行类型的转换。

localStorage键值对的方式存在的如下：

localStorage.a = 3;//设置a为"3"
localStorage["a"] = "sfsf";//设置a为"sfsf"，覆盖上面的值
localStorage.setItem("b","isaac");//设置b为"isaac"
var a1 = localStorage["a"];//获取a的值
var a2 = localStorage.a;//获取a的值
var b = localStorage.getItem("b");//获取b的值
localStorage.removeItem("c");//清除c的值

转载于:https://www.cnblogs.com/lufy/archive/2012/05/16/2504030.html