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的特性改变文本选中时的颜色
Sep 11 HTML / CSS
CSS3控制HTML元素动画效果
Feb 08 HTML / CSS
CSS3属性background-size使用指南
Dec 09 HTML / CSS
CSS3按钮鼠标悬浮实现光圈效果源码
Sep 11 HTML / CSS
Html5 实现微信分享及自定义内容的流程
Aug 20 HTML / CSS
基于HTML5 audio元素播放声音jQuery小插件
May 11 HTML / CSS
用HTML5制作烟火效果的教程
May 12 HTML / CSS
浅谈基于HTML5的在线视频播放方案
Feb 18 HTML / CSS
基于HTML5+CSS3实现简单的时钟效果
Sep 11 HTML / CSS
在html页面中取得session中的值的方法
Aug 11 HTML / CSS
完美实现CSS垂直居中的11种方法
Mar 27 HTML / CSS
DIV CSS实现网页背景半透明效果
Dec 06 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个人网站架设连环讲(四)
2006/10/09 PHP
php正则取img标记中任意属性(正则替换去掉或改变图片img标记中的任意属性)
2013/08/13 PHP
ThinkPHP 404页面的设置方法
2015/01/14 PHP
php中yii框架实例用法
2020/12/22 PHP
php中array_fill函数的实例用法
2021/03/02 PHP
Javascript String对象扩展HTML编码和解码的方法
2009/06/02 Javascript
汉化英文版的Dreamweaver CS5并自动提示jquery
2010/11/25 Javascript
使用JS或jQuery模拟鼠标点击a标签事件代码
2014/03/10 Javascript
javascript简单实现类似QQ头像弹出效果的方法
2015/08/03 Javascript
jQuery+PHP星级评分实现方法
2015/10/02 Javascript
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
2015/10/14 Javascript
AngularJS 指令详细介绍
2016/07/27 Javascript
js仿京东轮播效果 选项卡套选项卡使用
2017/01/12 Javascript
angularjs使用directive实现分页组件的示例
2017/02/07 Javascript
Angular中自定义Debounce Click指令防止重复点击
2017/07/26 Javascript
微信小程序使用wxParse解析html的实现示例
2018/08/30 Javascript
小程序实现单选多选功能
2018/11/04 Javascript
Vue中通过vue-router实现命名视图的问题
2020/04/23 Javascript
Javascript执行流程细节原理解析
2020/05/14 Javascript
Openlayers显示地理位置坐标的方法
2020/09/28 Javascript
vue中封装axios并实现api接口的统一管理
2020/12/25 Vue.js
[07:01]DOTA2-DPC中国联赛正赛 Aster vs Magma 3月5日 赛后选手采访
2021/03/11 DOTA
python 爬取微信文章
2016/01/30 Python
Python3 处理JSON的实例详解
2017/10/29 Python
对numpy中array和asarray的区别详解
2018/04/17 Python
python微元法计算函数曲线长度的方法
2018/11/08 Python
python http基本验证方法
2018/12/26 Python
python实现windows壁纸定期更换功能
2019/01/21 Python
python GUI库图形界面开发之PyQt5浏览器控件QWebEngineView详细使用方法
2020/02/26 Python
接口自动化多层嵌套json数据处理代码实例
2020/11/20 Python
个人纪律作风整改措施思想汇报
2014/10/12 职场文书
派出所副所长四风问题个人整改措施思想汇报
2014/10/13 职场文书
2014年机关党建工作总结
2014/11/11 职场文书
2016教师校本培训心得体会
2016/01/08 职场文书
vite+vue3.0+ts+element-plus快速搭建项目的实现
2021/06/24 Vue.js
Python查找算法的实现 (线性、二分,分块、插值查找算法)
2022/04/24 Python