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 mask遮罩实现一些特效
Oct 24 HTML / CSS
CSS3 特效范例整理
Aug 22 HTML / CSS
css3实现针线缝合效果(图解步骤)
Feb 04 HTML / CSS
如何在网站上添加谷歌定位信息
Apr 16 HTML / CSS
HTML5 canvas 基本语法
Aug 26 HTML / CSS
input file上传文件样式支持html5的浏览器解决方案
Nov 14 HTML / CSS
HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代
Jan 31 HTML / CSS
HTML5实现页面切换激活的PageVisibility API使用初探
May 13 HTML / CSS
iframe在移动端的缩放的示例代码
Oct 12 HTML / CSS
HTML5中的网络存储实现方式
Apr 28 HTML / CSS
使用layui实现左侧菜单栏及动态操作tab项的方法
Nov 10 HTML / CSS
css实现两栏布局,左侧固定宽,右侧自适应的多种方法
Aug 07 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加MYSQL服务器
2006/10/09 PHP
php header示例代码(推荐)
2010/09/08 PHP
PHP的Laravel框架结合MySQL与Redis数据库的使用部署
2016/03/21 PHP
PHP数据的提交与过滤基本操作实例详解
2016/11/11 PHP
表单提交时自动复制内容到剪贴板的js代码
2007/03/16 Javascript
javascript 特殊字符串
2009/02/25 Javascript
javascript 获取元素位置的快速方法 getBoundingClientRect()
2009/11/26 Javascript
多浏览器兼容性比较好的复制到剪贴板的js代码
2011/10/09 Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
2013/10/09 Javascript
Node.js中使用jQuery的做法
2016/08/17 Javascript
利用D3.js实现最简单的柱状图示例代码
2016/12/09 Javascript
canvas实现图像截取功能
2017/02/06 Javascript
深入理解vue2.0路由如何配置问题
2017/07/18 Javascript
深入理解 webpack 文件打包机制(小结)
2018/01/08 Javascript
nodeJs爬虫的技术点总结
2018/05/13 NodeJs
vue elementUI tree树形控件获取父节点ID的实例
2018/09/12 Javascript
three.js 将图片马赛克化的示例代码
2020/07/31 Javascript
JavaScript实现多球运动效果
2020/09/07 Javascript
[02:51]DOTA2英雄基础教程 艾欧
2014/01/13 DOTA
python基础教程之类class定义使用方法
2014/02/20 Python
Flask框架的学习指南之用户登录管理
2016/11/20 Python
梯度下降法介绍及利用Python实现的方法示例
2017/07/12 Python
Python判断两个对象相等的原理
2017/12/12 Python
Python Selenium Cookie 绕过验证码实现登录示例代码
2018/04/10 Python
Python计算开方、立方、圆周率,精确到小数点后任意位的方法
2018/07/17 Python
python GUI库图形界面开发之PyQt5表单布局控件QFormLayout详细使用方法与实例
2020/03/06 Python
Python批量处理csv并保存过程解析
2020/05/16 Python
Python的Django框架实现数据库查询(不返回QuerySet的方法)
2020/05/19 Python
Python生成并下载文件后端代码实例
2020/08/31 Python
卫校中专生的自我评价
2014/01/15 职场文书
意外伤害赔偿协议书
2014/09/16 职场文书
事业单位个人查摆问题及整改措施
2014/10/28 职场文书
大学教师个人总结
2015/02/10 职场文书
晶体管来复再生式二管收音机
2021/04/22 无线电
手把手教你从零开始react+antd搭建项目
2021/06/03 Javascript
Windows server 2012 NTP时间同步的实现
2022/06/25 Servers