专栏首页coding个人笔记localStorage和sessionStorage

localStorage和sessionStorage

在以前,想要存储数据在本地中只有cookie,而cookie又被限制了大小,在不同浏览器只能存储4k左右的cookie。于是H5新增了本地存储localStorage,在不同浏览器可以存储5M左右。

sessionStorage和localStorage的区别就是localStorage属于永久性存储,而sessionStorage属于当会话结束的时候,sessionStorage中的键值对会被清空。且localStorage和sessionStorage都属于window的方法。

sessionStorage:

页面必须在同一协议、同一主机名和同一端口下才能共享sessionStorage。页面关闭之后就会清空。

存:

sessionStorage.setItem('key','value');

取:

sessionStorage.getItem('key')

重新赋值:

sessionStorage.setItem('key','update value');

清除:

sessionStorage.removeItem('key');

清除全部:

sessionStorage.clear();

遍历所有:

for(var i=0;i<sessionStorage.length;i++){    alert(sessionStorage.key(i));    alert(sessionStorage[sessionStorage.key(i)]);}
localStorage:

本地缓存,关闭浏览器之后再次打开还能获取,不过存储内容过多页面性能会有影响。

存:

localStorage.setItem('key','value');

取:

localStorage.getItem('key')

重新赋值:

localStorage.setItem('key','update value');

清除:

localStorage.removeItem('key');

清除全部:

localStorage.clear();

遍历所有:

for(var i=0;i< localStorage.length;i++){    alert(localStorage.key(i));    alert(localStorage [localStorage.key(i)]);}

wade-tools npm包多封装了时间戳转换和这个localstorage的方法。

地址:

https://www.npmjs.com/package/wade-tools

如果有需要的可以说一下想要封装的小函数,力所能及的一定封装。

(完)

本文分享自微信公众号 - coding个人笔记(gh_2ce38b49dae1),作者:wade

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-12-18

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vue和react中循环key的作用

    没用过react开发项目,但想来跟vue在循环渲染中key的作用应该原理是一样的。循环在没有使用key的时候,vue会警告。但是这个key的作用是什么。

    wade
  • Proxy实现监听

    之前分享过vue2的响应式,然后有人问vue3用proxy是怎么实现的,本来打算研究一波,看了源码之后,发现自己想多了,所以改成学一学proxy的使用。

    wade
  • vue mixins原理

    以前一直以为mixins在vue里面应该不是很重要,只是提供了一个混入的api,慢慢的才知道mixin在vue里面非常重要。生命周期、vuex等都有mixin的...

    wade
  • Cookie、LocalStorage 与 SessionStorage的区别

    Cookie 是小甜饼的意思。顾名思义,cookie 确实非常小,它的大小限制为4KB左右。它的主要用途有保存登录信息,比如你登录某个网站市场可以看到“记住密码...

    跟着阿笨一起玩NET
  • [代码]PHP随机生成字符串

    雨落凋殇
  • 黑客入侵汽车,车载设备缓冲区溢出能防止吗?

    汽车开始联网后,被黑客盯上的可能性也越来越高。如果控制发动机、制动器及方向盘等电子控制单元(ECU)被黑客远程入侵,造成的影响无法估量。如果汽车正在行驶之中,...

    安恒信息
  • 02 . Redis哨兵

    如图所示,Redis的 **主从复制模式** 和Sentinel **高可用架构** 的示意图:

    常见_youmen
  • 2018年预计仍将持续活跃走高的数字货币都有哪些?

    2017年马上要过去了,在这辞旧迎新的时刻,有一个开放式问题,“2017年你最后悔的是什么事?” 每个人都有自己的答案,我来说一个对99%的人都适用的:那就是没...

    企鹅号小编
  • 风向玫瑰图

    今天要跟大家分享的图表是——风向玫瑰图! 听起来就能大概猜出来这种图表长啥样,就是很类似气象图表中的那种代表风向的方位图。 以下是本案例图表所用到的原始数据以及...

    数据小磨坊
  • 复仇者联盟与IntelliJ IDEA也很配哦

    之前转载过几位网友推荐的一些关于IntelliJ IDEA的插件。其中有一款插件几乎每位网友都会推荐它,我也一直在使用,那就是:Background Image...

    程序猿DD

扫码关注云+社区

领取腾讯云代金券