localStorage/cookie 用法分析与简单封装
本地存储是HTML5中提出来的概念,分localStorage和sessionStorage。通过本地存储,web应用程序能够在用户浏览器中对数据进行本地的存储。与 cookie 不同,存储限制要大得多(至少5MB),并且信息不会被传输到服务器。
什么时候用本地存储?
跨期:不同时间打开页面,比如这次登录需要用到上次登录时保存的数据。
跨页:在同一个浏览器打开同域的多个标签页,它们之间需要互通数据。
选用哪种存储方式?
最简单的数据保存方式就是在js里定义变量并赋值,这不属于本地存储的范畴,但大多数情况下这样做就够了。
cookie的适用场景:数据量小;数据需要随http请求传递到服务端;存储有具体时限的数据;低版本浏览器,不支持localStorage和sessionStorage时。
localStorage的使用场景:数据大于4k;需要跨标签页使用数据;长期存储数据;
sessionStorage的适用场景:数据只在本次会话有效;数据仅在当前标签页有效。sessionStorage对比直接js赋值变量的优势,是可以在同页面跨iframe使用。
浏览器自身会缓存img、js、css等数据,localStorage也可以起到类似作用。
整理本地存储方法
基于localStorage制作一个本地存储插件storage.js,针对只能存字符串、不能设置时限等进行补充,设想:
- 在不支持localStorage时自动使用cookie
- 类型转换,可存储数字、布尔、对象等
- 可设置时限,超时就自我删除
- 附带整理cookie方法
用法展示:
/** setItem( key, value, time)* key: 键名,字符串* value:键值,可以是Stirng/Boolean/Number/Object等类型* time: 超时时间,非必填,数字型(单位毫秒)。默认长期有效。**/storage.setItem("text", "this is string");storage.setItem("money", 1234);storage.setItem("person", {name: "Jone"}, 24*60*60*1000);// getItem 获取值storage.getItem("money"); //返回数字类型的值1234// removeItem 删除某数据storage.removeItem("money");// clear 清除所有数据storage.clear();// 类似方法,操作cookie,只限于存储字符串storage.setCookie("mycookie", "this is string", 60*60*24*30);storage.getCookie("mycookie");storage.removeCookie("mycookie");storage.clearCookie();
storage.js :
(function(window) {var storage = {};// 是否支持localStorageif (!window.localStorage) {storage.support = false;} else {storage.support = true;}// time为超时时间(单位毫秒),非必填storage.setItem = function(key, value, time) {if (this.support) {if (typeof key != "string") {console.log("*STORAGE ERROR* key必须是字符串");return;}if (time) {if (typeof time != "number") {console.log("*STORAGE ERROR* time必须是数字");return;} else {time = parseInt(time) (new Date()).getTime();}} else {time = null;}var setValue = {value: JSON.stringify(value),time: time}localStorage.setItem(key, JSON.stringify(setValue));} else {storage.setCookie(key, value, time)}};// 不存在的值会返回nullstorage.getItem = function(key) {if (this.support) {var getValue = JSON.parse(localStorage.getItem(key));if (!getValue) {return null;}if (getValue.time && getValue.time < (new Date()).getTime()) {localStorage.removeItem(key);return null;} else {return JSON.parse(getValue.value)}} else {storage.getCookie(key)}};// 移除某个值storage.removeItem = function(key) {if (this.support) {localStorage.removeItem(key);} else {storage.removeCookie(key)}};// 清空存储storage.clear = function() {if (this.support) {localStorage.clear();} else {storage.clearCookie();}};/**** cookie方法 ****/storage.setCookie = function(key, value, time) {if (typeof key != "string") {console.log("*STORAGE ERROR* key必须是字符串");return;} else {if (typeof time != "number") {// cookie默认存365天time = 365 * 24 * 60 * 60 * 1000;}var d = new Date();d.setTime(d.getTime() time);document.cookie = key "=" value "; expires=" d.toGMTString();}};storage.getCookie = function(key) {var cookies = document.cookie.split(";")var cookieValue;for (var i = 0; i < cookies.length; i ) {if (key == cookies[i].split("=")[0]) {cookieValue = cookies[i].split("=")[1];break;}}return cookieValue;};storage.removeCookie = function(key) {document.cookie = key "=; expires=Thu, 01 Jan 1970 00:00:00 GMT";};storage.clearCookie = function() {var cookies = document.cookie.split(";")for (var i = 0; i < cookies.length; i ) {document.cookie = cookies[i].split("=")[0] "=; expires=Thu, 01 Jan 1970 00:00:00 GMT";}};window.storage = storage;
})(window)
更多专业前端知识,请上 【猿2048】www.mk2048.com
localStorage/cookie 用法分析与简单封装相关推荐
- hiredis源码分析与简单封装
hiredis Hiredis是一个开源C库函数,提供了基本的操作redis 函数, 如数据库连接.发送命令.释放资源等等 1.hiredis net hiredis 本身就是做了跨平台的代码,c语言 ...
- 简单封装浏览器 cookie 工具类
版权声明:本文首发 http://asing1elife.com ,转载请注明出处. https://blog.csdn.net/asing1elife/article/details/8265571 ...
- Android AsyncTask 深度理解、简单封装、任务队列分析、自定义线程池
前言:由于最近在做SDK的功能,需要设计线程池.看了很多资料不知道从何开始着手,突然发现了AsyncTask有对线程池的封装,so,就拿它开刀,本文将从AsyncTask的基本用法,到简单的封装,再到 ...
- java中include标签的用法_原 ng-include用法分析以及多标签页面的简单实现方式
在平时的项目开发中,应该会经常遇到上图所示的需求,就是在一个页面中有多个标签,被选中的标签颜色会高亮显示,切换不同标签显示相应的不同内容.如果内容代码过多则写在同一个html文件就会显得特别乱,所以这 ...
- nodejs操作sqlserver数据_实例分析nodejs基于mssql模块连接sqlserver数据库的简单封装操作...
本文主要介绍了nodejs基于mssql模块连接sqlserver数据库的简单封装操作,结合实例形式分析了nodejs中mssql模块的安装与操作sqlserver数据库相关使用技巧,需要的朋友可以参 ...
- 简单封装 HTTP 请求
2017-2-19 更新到第二版: 源码地址:http://git.oschina.net/sp42/ajaxjs/tree/master/ajaxjs-base/src/com/ajaxjs/net ...
- php简单的功能模块,php中mysql模块部分功能的简单封装
php中mysql模块部分功能的简单封装 复制代码 代码如下: class mysql { private $db; // datebase connect private $result; // m ...
- 【OkHttp】OkHttp 源码分析 ( 网络框架封装 | OkHttp 4 迁移 | OkHttp 建造者模式 )
OkHttp 系列文章目录 [OkHttp]OkHttp 简介 ( OkHttp 框架特性 | Http 版本简介 ) [OkHttp]Android 项目导入 OkHttp ( 配置依赖 | 配置 ...
- 数据绑定以及Container.DataItem几种方式与用法分析 收藏
数据绑定以及Container.DataItem几种方式与用法分析 收藏 灵活的运用数据绑定操作 绑定到简单属性:<%#UserName%> 绑定到集合:& ...
最新文章
- 嵌入式Linux设备驱动程序:发现硬件配置
- Codeforces 706D Vasiliy's Multiset
- ping程序和tracert(traceroute)背后的故事--ICMP协议
- mysql经典面试题
- 用python画大白_[Python][可视化]matplotlib基础入门
- 跨栏表格位置跑到了下一页_LaTeX双栏模板插入通栏公式(跨栏插图)
- paip.51cto HTML转码规则
- 信息安全理论与技术知识点总结
- IDEA汉化后设置无法打开
- matlab-滤波系数生成频响曲线
- Python爬虫学习笔记-第二十七课(MongoDB下)
- ubuntu安装原生迅雷,让下载成为简单
- Linux命令 - 覆盖 > 和 追加 >>
- 估计中的概率公式总结
- 什么是内存屏障?具有什么作用?
- 计算机组成原理db和dw,汇编中的DW是什么意思那DB 它们什么作用
- 网络安全ctf比赛/学习资源整理,解题工具、比赛时间、解题思路、实战靶场、学习路线,推荐收藏!...
- 【隐式图搜索遍历学习】倒牛奶
- VB.net小技巧——使用DataGridView显示EXECL表格内容
- 阿里云原生实践:基于 Alluxio 数据缓存的大规模深度学习训练性能优化
热门文章
- 【LDPC系列2】基于MATLAB中LDPC编译码器对象的图像传输通信系统仿真(IEEE 802.16e标准协议基础矩阵)
- 【MFC系列-第8天】小型软件项目开发
- 线段树||BZOJ1593: [Usaco2008 Feb]Hotel 旅馆||Luogu P2894 [USACO08FEB]酒店Hotel
- python内建时间模块 time和datetime
- Android Studio 日志工具
- ASP渲染下拉框使时间依次减少
- 闰秒对数据库和linux的影响
- Queue Explorer过期处理
- 【Java心得总结六】Java容器中——Collection
- 重启IIS和SqlServer的命令行