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属性box-shadow使用详细教程
Jan 21 HTML / CSS
使用css3制作登录表单的步骤
Apr 07 HTML / CSS
CSS3 RGBA色彩模式使用实例讲解
Apr 26 HTML / CSS
Android本地应用打开方法——通过html5写连接
Mar 11 HTML / CSS
HTML5 video 事件应用示例
Sep 11 HTML / CSS
HTML5单页面手势滑屏切换原理
Mar 21 HTML / CSS
详解HTML5中的拖放事件(Drag 和 drop)
Nov 14 HTML / CSS
浅谈HTML5 服务器推送事件(Server-sent Events)
Aug 01 HTML / CSS
Canvas绘制浮动球效果的示例
Dec 29 HTML / CSS
移动端Html5页面生成图片解决方案
Aug 07 HTML / CSS
AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码
Aug 19 HTML / CSS
详解Html5项目适配系统深色模式方案总结
Apr 14 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下通过file_get_contents的代理使用方法
2011/02/16 PHP
删除html标签得到纯文本可处理嵌套的标签
2014/04/28 PHP
php基本函数汇总
2015/07/09 PHP
thinkphp3.x自定义Action、Model及View的简单实现方法
2016/05/19 PHP
php中使用websocket详解
2016/09/23 PHP
PHP实现添加购物车功能
2017/03/06 PHP
[原创]PHP正则删除html代码中a标签并保留标签内容的方法
2017/05/23 PHP
解决php写入数据库乱码的问题
2019/09/17 PHP
php设计模式之状态模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
JavaScript与C# Windows应用程序交互方法
2007/06/29 Javascript
js的正则test,match,exec详细解析
2014/01/29 Javascript
javascript制作的网页侧边弹出框思路及实现代码
2014/05/21 Javascript
Node.js中的事件驱动编程详解
2014/08/16 Javascript
浅谈jQuery中事情的动态绑定
2017/02/12 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
2017/02/24 Javascript
NodeJs通过async/await处理异步的方法
2017/10/09 NodeJs
基于vue2的canvas时钟倒计时组件步骤解析
2018/11/05 Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
2019/04/22 Javascript
vue-cli3 引入 font-awesome的操作
2020/08/11 Javascript
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
2021/01/05 Vue.js
[41:20]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS DK
2014/05/26 DOTA
python处理csv数据的方法
2015/03/11 Python
Python使用django获取用户IP地址的方法
2015/05/11 Python
Django中模版的子目录与include标签的使用方法
2015/07/16 Python
djang常用查询SQL语句的使用代码
2019/02/15 Python
pyqt实现.ui文件批量转换为对应.py文件脚本
2019/06/19 Python
PIL包中Image模块的convert()函数的具体使用
2020/02/26 Python
浅析python实现动态规划背包问题
2020/12/31 Python
希尔顿酒店中国网站:Hilton中国
2017/03/11 全球购物
全球速卖通:AliExpress(国际版淘宝)
2017/09/20 全球购物
英国儿童设计师服装的领先零售商:Base
2019/03/17 全球购物
世界上最大的艺术社区:SAA
2020/12/30 全球购物
写演讲稿所需要注意的4个条件
2014/01/09 职场文书
镇人大副主席民主生活会对照检查材料思想汇报
2014/10/01 职场文书
教师节老师寄语
2015/05/28 职场文书
Spring Bean是如何初始化的详解
2022/03/22 Java/Android