博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
[Html5]sessionStorage和localStorage的区别
阅读量:7112 次
发布时间:2019-06-28

本文共 1231 字,大约阅读时间需要 4 分钟。

摘要

有时需要在浏览器中保存一些数据,特别在app中嵌入的h5页面中,需要在webview中保存一些数据,作为客户端的数据持久化。

h5中web storage有两种存储方式:sessionStorage和localStorage。

sessionStorage:用于存储一次会话的数据,这些数据只有在同一个会话中的页面才能访问到,当会话结束后,数据也随之销毁,可以这样形容sessionStorage,是会话级别的数据存储。

localStorage:用于持久本地数据,除非主动删除,否则数据永远存在。

web Storage和cookie的区别

首先,它们都是存储在客户端的。但cookie的大小是受限制的,并且每次请求服务器,都会带着cookie中的数据。而且cookie,需要指定作用域,不可跨域访问。

web Storage可以通过setItem,getItem,removeItem,clear等方法,操作更方便。cookie则不同,如果你想用js操作cookie,需要自己封装设置和获取cookie的方法。

兼容性

除了万恶的IE7- ,现在的主流浏览器都支持web Storage。可以通过下面的代码判断是否支持web Storage。

if (window.localStorage) {        console.log("支持");    } else {        console.log("No支持");    };

localStorage和sessionStorage

通过setItem("key","value")设置值。

注意,这里key和value都是string类型的。如果想要存储json,需要将json转换为json字符串。

window.localStorage.setItem("user", "wolfy");    window.localStorage.setItem("userJson", JSON.stringify({ "name": "wolfy", "age": 25 }));

 

getItem("key"):获取key对应value

console.log("name",window.localStorage.getItem("user"));

删除

window.localStorage.removeItem("user");

清楚所有的值

window.localStorage.clear();

总结

总结,这里只列举了localStorage的用法,seesionStorage的类似。只不过他们的生命周期不同,sessionStorage是会话级别的存储,你可以这样理解,当浏览器关闭的时候,sessionStorage已经没有了,而localStorage仍然存在。

转载于:https://www.cnblogs.com/wolf-sun/p/5819803.html

你可能感兴趣的文章
QML与c++交互学习笔记(八) qt c++直接调用QML中的函数, 直接设置属性
查看>>
QT VS配置UNICODE问题
查看>>
Web基础知识和技术
查看>>
各种操作系统
查看>>
Angularjs调用公共方法与共享数据
查看>>
Unix/Linux环境C编程新手教程(12) openSUSECCPP以及Linux内核驱动开发环境搭建
查看>>
[原创]LoadRunner 12.02 录制脚本时提示无Internet访问,如何解决?
查看>>
【转】2012年6月26 – 盛大PHP工程师最新面试题
查看>>
ubuntu:undefined reference to `snd_pcm_open'
查看>>
undefined reference to libiconv_open ext/iconv/.libs/iconv.o by install phpsource
查看>>
Jquery使容器自适应浏览器窗口
查看>>
Tensorflow学习笔记——安装和运行
查看>>
《JavaScript》——DOM
查看>>
【ios开发学习 - 第二课】iOS项目文件夹结构
查看>>
【基础练习】【线性DP】codevs3027 线段覆盖2题解
查看>>
Session分布式共享 = Session + Redis + Nginx
查看>>
ES6中的迭代器(Iterator)和生成器(Generator)(二)
查看>>
beego1---beego,bee环境配置
查看>>
MinGW下编译openssl, json-c
查看>>
thinkphp跨模块调用
查看>>