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 3D制作实战案例分析
Sep 18 HTML / CSS
使用CSS3中的calc()属性来以算式表达尺寸数值
Jun 06 HTML / CSS
如何用border-image实现文字气泡边框的示例代码
Jan 21 HTML / CSS
HTML5实现QQ聊天气泡效果
Jun 26 HTML / CSS
HTML5 使用 sessionStorage 进行页面传值的方法
Jul 02 HTML / CSS
深入解析HTML5 Canvas控制图形矩阵变换的方法
Mar 24 HTML / CSS
HTML5学习心得总结(推荐)
Jul 08 HTML / CSS
canvas拼图功能实现代码示例
Nov 21 HTML / CSS
css3实现背景图片半透明内容不透明的方法示例
Apr 13 HTML / CSS
关于CSS浮动与取消浮动的问题
Jun 28 HTML / CSS
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
Jan 18 HTML / CSS
el-form每行显示两列底部按钮居中效果的实现
Aug 05 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 printf输出格式使用说明
2010/12/05 PHP
php使用ZipArchive提示Fatal error: Class ZipArchive not found in的解决方法
2014/11/04 PHP
PHP制作登录异常ip检测功能的实例代码
2016/11/16 PHP
PHP基于curl模拟post提交json数据示例
2018/06/22 PHP
utf8的编码算法 转载
2006/12/27 Javascript
JavaScript 关键字屏蔽实现函数
2009/08/02 Javascript
基于Jquery+Ajax+Json的高效分页实现代码
2011/10/29 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
2013/11/28 Javascript
node.js中的fs.realpathSync方法使用说明
2014/12/16 Javascript
node.js中的fs.readSync方法使用说明
2014/12/17 Javascript
jQuery中outerWidth()方法用法实例
2015/01/19 Javascript
js实现鼠标经过时图片滚动停止的方法
2015/02/16 Javascript
JS组件Bootstrap实现下拉菜单效果代码
2016/04/26 Javascript
jQuery is not defined 错误原因与解决方法小结
2017/03/19 Javascript
前端页面文件拖拽上传模块js代码示例
2017/05/19 Javascript
JavaScript实现音乐自动切换和轮播
2017/11/05 Javascript
详解基于mpvue的小程序markdown适配解决方案
2018/05/08 Javascript
vue.js引入外部CSS样式和外部JS文件的方法
2019/01/06 Javascript
javascript实现一款好看的秒表计时器
2020/09/05 Javascript
[40:16]TFT vs Mski Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
Python的Flask框架中的Jinja2模板引擎学习教程
2016/06/30 Python
深度辨析Python的eval()与exec()的方法
2019/03/26 Python
python 实现二维字典的键值合并等函数
2019/12/06 Python
Python无损压缩图片的示例代码
2020/08/06 Python
HTML5的Geolocation地理位置定位API使用教程
2016/05/12 HTML / CSS
html5组织内容_动力节点Java学院整理
2017/07/10 HTML / CSS
美国网上花店:JustFlowers
2017/02/12 全球购物
美国男士西装打折店:Jos. A. Bank
2017/11/13 全球购物
开业庆典主持词
2014/03/21 职场文书
《青蛙看海》教学反思
2014/04/23 职场文书
初级党校心得体会
2014/09/11 职场文书
大一新生检讨书
2014/10/29 职场文书
李强为自己工作观后感
2015/06/11 职场文书
如何撰写创业策划书
2019/06/27 职场文书
python基础之错误和异常处理
2021/10/24 Python
python+pyhyper实现识别图片中的车牌号思路详解
2022/12/24 Python