localstorage和sessionstorage使用记录(推荐)


Posted in HTML / CSS onMay 23, 2017

通过阅读各路大神对web存储locastorage和sessionstorage的用法解析,自己试用了一下,在此留个备忘。

在项目中,如果用到很多次storage,要存储很多数据,就要把它封装成函数了:

(该函数系不知名大神所写,如有侵犯原创,请联系我……)

function setStorage(key,value){
        if(!window.localStorage){
            alert("浏览器不支持localstorage");
            return false;
        }else{
            var storage=window.localStorage;
            //写入字段
            storage.setItem(key,value);
        }
    }
    function getStorage(key){
        if(!window.localStorage){
            alert("浏览器不支持localstorage");
        }else{
            var storage=window.localStorage;
            var key=storage.getItem(key);
//            console.log(key);
            return key;
        }
}

setStorage是存储数据的,key是指定的数据名称,可以随意起,但是一定要是字符串类型,否则浏览器自动把值作为key的名字。

localstorage和sessionstorage使用记录(推荐)

如图 第一个值,就是key不是以字符串指定的,即没有加双引号。

value值字符串类型的也切记加双引号。

在浏览器中如何查看storage?

较新版本的chrome浏览器,查看位置如图:

localstorage和sessionstorage使用记录(推荐)

在项目中如果多次调用同样的存储数据的函数,则数据会实时改变,如果需要清除所有存储的数据:

localstorage.clear();或者sessionStorage.clear();

项目中使用的原则就是,哪个数据需要存储,就用哪个数据调用存数数据的函数。

以上所述是小编给大家介绍的localstorage和sessionstorage使用记录(推荐),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
纯CSS3实现表单验证效果(非常不错)
Jan 18 HTML / CSS
CSS3中的opacity属性使用教程
Aug 19 HTML / CSS
css3实现画半圆弧线的示例代码
Nov 06 HTML / CSS
html5的画布canvas——画出简单的矩形、三角形实例代码
Jun 09 HTML / CSS
针对HTML5的Web Worker使用攻略
Jul 12 HTML / CSS
Html5 web本地存储实例详解
Jul 28 HTML / CSS
canvas实现二维码和图片合成的示例代码
Aug 01 HTML / CSS
手对手的教你用canvas画一个简单的海报的方法示例
Dec 10 HTML / CSS
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
Jan 19 HTML / CSS
Html5同时支持多端sdk的小技巧
Nov 17 HTML / CSS
bootstrapv4轮播图去除两侧阴影及线框的方法
Feb 15 HTML / CSS
box-shadow单边阴影的实现
May 21 HTML / CSS
Html5实现文件异步上传功能
May 19 #HTML / CSS
Html5新标签datalist实现输入框与后台数据库数据的动态匹配
May 18 #HTML / CSS
HTML5中indexedDB 数据库的使用实例
May 11 #HTML / CSS
详解HTML5 window.postMessage与跨域
May 11 #HTML / CSS
HTML5拖放API实现拖放排序的实例代码
May 11 #HTML / CSS
解决html5中video标签无法播放mp4问题的办法
May 07 #HTML / CSS
Web前端页面跳转并取到值
Apr 24 #HTML / CSS
You might like
PHP中去掉字符串首尾空格的方法
2012/05/19 PHP
通过PHP实现获取访问用户IP
2020/05/09 PHP
JavaScript学习笔记之获取当前目录的实现代码
2010/12/14 Javascript
JQuery ztree 异步加载实例讲解
2016/02/25 Javascript
JS中取二维数组中最大值的方法汇总
2016/04/17 Javascript
深入剖析JavaScript:Object类型
2016/05/10 Javascript
ReactNative页面跳转实例代码
2016/09/27 Javascript
jquery心形点赞关注效果的简单实现
2016/11/14 Javascript
vue组件间通信解析
2017/03/01 Javascript
详解Vue-cli 创建的项目如何跨域请求
2017/05/18 Javascript
详解基于vue的服务端渲染框架NUXT
2018/06/20 Javascript
小程序云函数调用API接口的方法
2019/05/17 Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
2019/11/07 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
2020/04/15 Javascript
小程序点餐界面添加购物车左右摆动动画
2020/09/23 Javascript
JavaScript用document.write()输出换行的示例代码
2020/11/26 Javascript
[09:40]DAC2018 4.5 SOLO赛 MidOne vs Miracle
2018/04/06 DOTA
Python实现处理管道的方法
2015/06/04 Python
关于Python面向对象编程的知识点总结
2017/02/14 Python
Python使用迭代器捕获Generator返回值的方法
2017/04/05 Python
运行django项目指定IP和端口的方法
2018/05/14 Python
python实现简易内存监控
2018/06/21 Python
Python multiprocessing多进程原理与应用示例
2019/02/28 Python
Django CSRF跨站请求伪造防护过程解析
2019/07/31 Python
python中property和setter装饰器用法
2019/12/19 Python
万得城电器土耳其网站:欧洲第一大电子产品零售商
2016/10/07 全球购物
维多利亚的秘密官方旗舰店:VICTORIA’S SECRET
2018/04/02 全球购物
学年自我鉴定
2014/01/16 职场文书
教师党性分析材料
2014/02/04 职场文书
《学会合作》教学反思
2014/04/12 职场文书
竞选劳动委员演讲稿
2014/04/28 职场文书
丧事答谢词
2015/01/05 职场文书
反邪教警示教育活动总结
2015/05/09 职场文书
Promise面试题详解之控制并发
2021/05/14 面试题
纯CSS如何禁止用户复制网页的内容
2021/11/01 HTML / CSS
Go语言测试库testify使用学习
2022/07/23 Golang