HTML5 LocalStorage 当地储存更新值还在

2021-02-24 02:48 jianzhan

H5的两种储存技术性的最大差别便是性命周期。

1. localStorage是当地储存,储存限期不限;

2. sessionStorage对话储存,网页页面关掉数据信息就会遗失。

应用方式:

localStorage.setItem(“key”,“value”)//储存

localStorage.getItem(key)//按key开展赋值

localStorage.valueOf( )//获得所有值

localStorage.removeItem("key")//删掉单独值,留意引号

localStorage.clear()//删掉所有数据信息

localStorage.length//得到数据信息的数量

localStorage.key(N)//得到第N个数据信息的key值

注:localStorage和sessionStorage同上,应用方式1样

常见的几个总结:

localStorage.key = 1;//设定储存,名为key,值为1

localStorage.removeItem("key");//移除储存key,记得key加引号

下面是检测1个好用的事例:

来完成键入的文字內容当地存起来,以做到关掉该访问器,再再次开启后,以前键入的內容仍然还在(普遍于手机上钉钉系统日志中的请假等字段录入处)。

最先,网页页面上弄个文字域<textarea></textarea>,下面是jQuery:

if(!localStorage.getItem("text"))  //window目标的话,前面的window省略了哦
    localStorage.setItem("text","");  //这里先分辨1下,做空白储存,不然回到 NULL 显示信息出来体验不太好,这里的if大括号省去了
    localStorage.text = localStorage.getItem("text");  //赋值
    $("textarea").html(localStorage.text);  //显示信息
    $("textarea").keyup(function(){  //这里有许多,例如blur, change, keydown, 也有做个定时执行器也行,好用于多字段储存
        localStorage.setItem("text",$(this).val());  //再次储存
    });

以上便可完成1个好用的小作用,反映H5当地储存還是很有效的,自然字段许多的话,出示的有JSON方式来用哦!见下列,载自互联网

<script type="text/javascript">
    if(window.sessionStorage){
        alert('ok');
    }else{
        alert('fail');
    }
    // 设定值
    sessionStorage.setItem('key_a', 1);
    // 赋值
    var key_a = sessionStorage.getItem('key_a');
    console.log(key_a);
    // 删掉
    sessionStorage.removeItem('key_a');
    console.log(sessionStorage.getItem('key_a'));// null
    sessionStorage.setItem('key_b', 1);
    sessionStorage.setItem('key_c', 2);
    // 消除全部键值
    sessionStorage.clear();
    console.log(sessionStorage.key_b);
    console.log(sessionStorage.key_c);
    console.log('==================');
    // 设定值和赋值还可以应用.标记,相近于取目标特性
    // 设定值
    sessionStorage.key_d = 12;
    // 赋值
    var key_d = sessionStorage.key_d;
    console.log(key_d);
    // 有个住宅小区别,假如这个key沒有了。1个回到值undefined,1个是null
    console.log(sessionStorage.key_null);// undefined
    console.log(sessionStorage.getItem('key_null'));// null
    console.log('==========简易演试1个储放目标的事例========');
    var obj = {
        a : 12,
        b : [1,2,3,4,5],
        c : {
            x : 'a',
            y : ['bb', 12, 'cc', {a:1,b:2}],
            z : 1333
        }
    };
    sessionStorage.setItem('page', JSON.stringify(obj));
    // 赋值
    var page = JSON.parse(sessionStorage.getItem('page'));
    console.log(page);
    // 遍历下数字能量数组
    for(var i=0;i< page.b.length;i++){
        console.log(page.b[i]);
    }
    // 遍历目标,一般用in
    for(var j in page.c){
        console.log(page.c[j])
    }
    // 删掉key
    sessionStorage.removeItem('page');
</script>

例:计数器, 更新网页页面,可看实际效果:

<div id="test"></div>
<script>
var storage = window.localStorage;
if (!storage.getItem("pageLoadCount"))
storage.setItem("pageLoadCount",0);
storage.pageLoadCount = parseInt(storage.getItem("pageLoadCount")) + 1;//务必文件格式变换
document.getElementById("test").innerHTML = storage.pageLoadCount;
//showStorage();
</script>

 必须留意的是,HTML5当地储存只能存标识符串,任何文件格式储存的情况下都会被全自动变为标识符串,因此载入的情况下,必须自身开展种类的变换。这也便是上1段编码中parseInt务必要应用的缘故。

以上所述是网编给大伙儿详细介绍的HTML5 LocalStorage 当地储存更新值还在,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!