请选择 进入手机版 | 继续访问电脑版

五分钟入门localStorage

发表于 11-20 15:50 显示全部楼层 5 48

本帖最后由 赵文贤老师 于 2017-11-20 16:06 编辑

        稍微学过javascript的同学可能或多或少听说过本地存储,这仿佛是个抽象的概念。实际上,你会发现本地存储在目前来讲也就这么几个关键词:cookie、localStorage和sessionStorage等。

        cookie这东西由来已久,ie8以下的浏览器均使用它来记录客户端的临时数据。而新兴的H5则是使用localStorage和sessionStorage来完成这项使命,并且能兼容ie8及其以上的浏览器。原理上讲,这两者是相同的。本篇以localStorage举例,教大家如何轻松入门。

        首先讲讲localStorage的优势,localStorage的大小限制从cookie的4k提升至5M,这是本地存储的一次革命性变化。那么,怎样让大家了解这个东西呢?

<input type="text" value="1">

        以上这个input,当你在页面里载入后,无论你将value值怎么修改,重新刷新后,value都会变回“1”,因为浏览器并没有记录你的输入值,因此,我们可以用localStorage来完成这项工作。

<input type="text" value="0" id="ipt">
<button id="btn">清除缓存</button>

        实现功能讲解:在我没有点击“清除缓存按钮”时,我希望每次刷新页面,input中的value值就加1,直到我点击“清除缓存”按钮,再次刷新就又从1开始。JS代码如下:

var storage = window.localStorage;
if(!storage.getItem("num")){
  storage.setItem("num",0);
}
storage.num = parseInt(storage.getItem("num"))+1;
document.getElementById("ipt").value = storage.num;
    
document.getElementById("btn").onclick = function(){
  storage.removeItem("num");
}

        当然,由于setItem设置了num从0开始,所以每次清除缓存后,value在页面刷新后依然会从1开始.。如果你希望看到input的value从0开始,相信你也知道将num的0改为-1了吧?

        简单讲解一下几个核心点:

        window.localStorage表示客户端本地存储;

        getItem()setItem()分别表示获取与修改,记住,获取到的数据都会是字符串形式,所以才有后面的parseInt()将num转为数字;

        removeItem()表示抹去存储的数据。

        源码附上,希望对大家有帮助!

        链接: https://pan.baidu.com/s/1qYSJURM 密码: 6ria

回复 使用道具
举报
仰光的阳光

发表于 12-06 01:47 显示全部楼层

我思故我在,我在我就回

回复 支持 反对 使用道具
举报
今夜来微微

发表于 11-28 10:40 显示全部楼层

回复 支持 反对 使用道具
举报
破葫芦

发表于 11-22 11:02 显示全部楼层

围观楼主

回复 支持 反对 使用道具
举报
欧水萍

发表于 11-20 16:14 显示全部楼层

666

回复 支持 反对 使用道具
举报
青果杰杰

发表于 11-20 15:52 显示全部楼层

回复 支持 反对 使用道具
举报

发表新文章
赵文贤老师

小码哥名师团队

1

学分

1017

学币

1144

积分

小码哥名师团队

Rank: 5Rank: 5

积分
1144

小码哥一周年勋章前100注册用户勋章

Ta的主页 发消息
精华帖排行榜

精彩推荐

  • 关注小码哥教育