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

五分钟入门localStorage

发表于 2017-11-20 15:50 显示全部楼层 16 191

本帖最后由 赵文贤老师 于 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

回复 使用道具
举报
青果园

发表于 05-21 01:24 显示全部楼层

作为新人,在吧里不敢大声说话,也不敢得罪人,只能默默地顶完贴转身就走,不求深藏功与名,只求前排混脸熟

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

发表于 04-29 21:21 显示全部楼层

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

发表于 04-23 14:30 显示全部楼层

别人说是金子总要发光的,我就来看看。

回复 支持 反对 使用道具
举报
烟雨过客

发表于 04-17 13:52 显示全部楼层

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

发表于 04-10 13:29 显示全部楼层

支持!支持!!

回复 支持 反对 使用道具
举报
小明不易做

发表于 04-05 16:03 显示全部楼层

以诚感人者,人亦诚而应。一点回复,敬请笑纳!

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

好文章,必须帮顶!!!

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

发表于 02-25 15:40 显示全部楼层

楼主再见

回复 支持 反对 使用道具
举报
执笔落花雪

发表于 02-16 01:13 显示全部楼层

我思故我在,我在我就回

回复 支持 反对 使用道具
举报
12下一页

发表新文章
赵文贤老师

小码哥名师团队

1

学分

1029

学币

1156

积分

小码哥名师团队

Rank: 5Rank: 5

积分
1156

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

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

精彩推荐

  • 关注小码哥教育