开发者社区> 技术小阿哥> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

localstorage和sessionstorage上手使用记录

简介:
+关注继续查看

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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的名字。

wKioL1kjsw6hiN19AAAYL2gTmaY587.png

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

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


在浏览器中如何查看storage?


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


wKioL1kjs6bDPXebAABSO9WAEfE668.png

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

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

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

其他概念,相信其他参考资料已经写的很详细透彻了。

http://www.111cn.net/wy/html5/85886.htm

上面这篇写的不错,收藏一下。



本文转自 蓓蕾心晴 51CTO博客,原文链接:http://blog.51cto.com/beileixinqing/1928518,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
彻底弄清楚session,cookie,sessionStorage,localStorage的区别及应用场景(面试向)
客户端状态保持是一个老生常谈的问题了,归根结底追踪浏览器的用户身份及其相关数据无非就是以下四种方式:session,cookie,sessionStorage,localStorage
0 0
WebApi入门第十章(本地存储 localstorage与sessionstorage)
WebApi入门第十章(本地存储 localstorage与sessionstorage)
0 0
【Vue】本地存储(LocalStorage)和会话存储(SessionStorage)
【Vue】本地存储(LocalStorage)和会话存储(SessionStorage)
0 0
前端 - cookie、localStorage、sessionStorage 生命周期
前端 - cookie、localStorage、sessionStorage 生命周期
0 0
浏览器缓存库设计总结(localStorage/indexedDB)
浏览器缓存设计一直是web性能优化中非常重要的一个环节,也是SPA应用盛行的今天不得不考虑的问题.作为一名优秀的前端工程师,为了让我们的应用更流畅,用户体验更好,我们有必要做好浏览器缓存策略.
0 0
前端培训-中级阶段(22)- localStorage / sessionStorage 本地存储(2019-10-24期)
前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知识的中心思想,我们开课啦(每周四)。
0 0
sessionStorage、localStorage、cookie 的简介与区别
sessionStorage、localStorage、cookie 的简介与区别
0 0
晨兴夜寐:这一次,彻底搞懂Cookie,LocalStorage,SessionStorage
晨兴夜寐:这一次,彻底搞懂Cookie,LocalStorage,SessionStorage
0 0
深入了解浏览器存储:对比Cookie、LocalStorage、sessionStorage与IndexedDB
随着移动网络的发展与演化,我们手机上现在除了有原生 App,还能跑“WebApp”——它即开即用,用完即走。一个优秀的 WebApp 甚至可以拥有和原生 App 媲美的功能和体验。WebApp 优异的性能表现,有一部分原因要归功于浏览器存储技术的提升。
2073 0
localStorage和sessionStorage区别
localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。 他们均只能存储字符串类型的对象(虽然规范中可以存储其他原生类型的对象,但是目前为止没有浏览器对其进行实现)。
610 0
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载