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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/364740.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用Lucene的搜索服务器搜索Jira问题

您可能还记得我的第一篇博客文章&#xff0c;其中描述了Lucene开发人员如何使用Lucene搜索应用程序查找我们的Jira问题来食用我们自己的狗食。 该应用程序已成为许多Lucene现代功能的强大展示&#xff0c;例如侧向钻取和动态范围刻面&#xff0c; 基于中缀匹配的新建议 &#…

迭代加深搜索 C++解题报告 :[SCOI2005]骑士精神

题目 此题根据题目可知是迭代加深搜索。 首先应该枚举空格的位置&#xff0c;让空格像一个马一样移动。 但迭代加深搜索之后时间复杂度还是非常的高&#xff0c;根本过不了题。 感觉也想不出什么减枝&#xff0c;于是便要用到了乐观估计函数&#xff08;Optimistic Estimation …

一个web项目web.xml的配置中context-param配置作用

<context-param>的作用:web.xml的配置中<context-param>配置作用1. 启动一个WEB项目的时候,容器(如:Tomcat)会去读它的配置文件web.xml.读两个节点: <listener></listener> 和 <context-param></context-param>2.紧接着,容器创建一个Servl…

JavA持有类_关于继承:Java持有对象的超类的类型

本问题已经有最佳答案&#xff0c;请猛点这里访问。我有两个类动物和狗。因为你可以从动物身上延伸出来。我可以毫无问题地编写这些类&#xff0c;但我注意到我可以像这样创建一个新的dog对象&#xff1a;Dog firstDog new Dog("rocky");没关系&#xff0c;但是当我…

CSS3 选择器用法小结

表单选择器&#xff1a; /*:enabled 可用的 :disabled 被禁用的 :focus 获取了焦点的 多用在表单元素上*/ input:enabled {...} input:disabled {...} input:focus {...} 属性选择器&#xff1a; /*[attribute] [attributevalue] 选择具有对应属性的元素 即使此属性没有实际作…

Postgres和Oracle与Hibernate的兼容性

在某些情况下&#xff0c;您的JEE应用程序需要支持Postgres和Oracle作为数据库。 Hibernate应该在这里完成工作&#xff0c;但是有些细节值得一提。 在为已经运行Oracle的应用程序启用Postgres时&#xff0c;我遇到了以下棘手的部分&#xff1a; BLOBs支持&#xff0c; CLO…

Ubuntu|ython3 :ImportError: cannot import name 'main'

1、问题 rootstephen-K55VD:/usr/bin# pip3 Traceback (most recent call last):File "/usr/bin/pip3", line 9, in <module>from pip import main ImportError: cannot import name main2、解决办法 编辑/usr/bin/pip3&#xff0c;修改代码 from pip._interna…

51Nod 1362 搬箱子 —— 组合数(非质数取模) (差分TLE)

题目&#xff1a;http://www.51nod.com/Challenge/Problem.html#!#problemId1362 首先&#xff0c;\( f[i][j] \) 是一个 \( i \) 次多项式&#xff1b; 如果考虑差分&#xff0c;用一个列向量维护 0 次差分到 \( n \) 次差分即可&#xff0c;在第 \( n \) 次上差分数组已经是一…

java星座查询系统_星座查询示例代码

package api.jisuapi.astro;import api.util.HttpUtil;import net.sf.json.JSONArray;import net.sf.json.JSONObject;public class All {public static final String APPKEY "your_appkey_here";// 你的appkeypublic static final String URL "https://api.j…

Java 8 Friday Goodies:轻松派本地缓存

在Data Geekery &#xff0c;我们喜欢Java。 而且&#xff0c;由于我们真的很喜欢jOOQ的流畅的API和查询DSL &#xff0c;我们对Java 8将为我们的生态系统带来什么感到非常兴奋。 我们已经写了一些关于Java 8好东西的博客 &#xff0c;现在我们觉得是时候开始一个新的博客系列了…

【JS】使用变量作为object的key-方法汇总

1、方法一 1 var a id; 2 var str {a : 12} 3 var obj eval("("str")"); 结果&#xff1a; 1 obj{id:12} 2、方法二 1 var aname; 2 var obj{}; 3 obj[a]jack; 结果&#xff1a; 1 obj{name:jack} 3、方法三 1 var aage; 2 var obj{[a]:23}; 结果&…

JS数组与对象的遍历方法大全

本文简单解析各种数组和对象属性的遍历方法&#xff1a; 原生for循环、for-in及forEachES6 for-of方法遍历类数组集合Object.key()返回键名的集合jQuery的$.each()underscore的_.each() 文中的范例基于以下数组和对象。 var arrTmp ["value1","value2",&…

coordin.h与coordin.h

如果文件包含在尖括号中&#xff0c;则C编译器将在存储标准文件的主机系统的文件系统中查找&#xff1b; 如果文件名包含在双引号中&#xff0c;则编译器将首先查找当前的工作目录或源代码目录。如果没有在那里找到头文件&#xff0c;则将在标准位置查找。转载于:https://www.c…

java二嗨租车项目_Java入门第二季6-1租车项目代码

一共有5个类Car类 //作为父类package com.imooc;public class Car {public int ID;public String name;public int rent;public int PersonCapacity;public int GoodsCapacity;}2.passengerCar //客车public class passengerCar extends Car{public passengerCar(int newID,Str…

go语言基础知识笔记(二)之数组和切片

数组和切片知识用的也是比较多&#xff0c;的给我们工作带来很大的便利 &#xff08;一&#xff09; 数组 定义&#xff1a;在golang中数组的长度是不可变&#xff0c;数组存放要求是同一种数据类型 //golang中数组定义的四种方法1.先声明&#xff0c;后赋值  var arr1 [2]in…

错误处理在Spring Integration中如何工作

1.引言 这篇文章的目标是向您展示将消息传递系统与Spring Integration结合使用时如何处理错误。 您将看到同步和异步消息传递之间的错误处理有所不同。 和往常一样&#xff0c;我将跳过聊天并继续进行一些示例。 您可以在github上获取源代码。 2&#xff0c;样品申请 我将使用…

原生js、jQuery实现选项卡功能

在大家在网上平常浏览网页的时候&#xff0c;想必各位都会看到选项卡功能&#xff0c;在这里给大家详解一下用原生js、jQuery如何来写一些基本的选项卡 话不多说&#xff0c;先给各位看一下功能图&#xff1a; 好了&#xff0c;下边开始写代码了&#xff1a; HTML代码&#x…

.NET core2.0 发布至IIS中

.NET CORE和asp.net 发布时不太一样&#xff0c;ASP.NET Core不再是由IIS工作进程&#xff08;w3wp.exe&#xff09;托管&#xff0c;而是使用自托管Web服务器&#xff08;Kestrel&#xff09;运行&#xff0c;IIS则是作为反向代理的角色转发请求到Kestrel不同端口的ASP.NET Co…

深入了解Java 8日期和时间API

在这篇文章中&#xff0c;我们将更深入地了解通过Java 8获得的新的Date / Time API&#xff08; JSR 310 &#xff09;。 请注意&#xff0c;本文主要由显示新API功能的代码示例驱动。 我认为这些示例是不言自明的&#xff0c;因此我没有花太多时间在它们周围写文本:-) 让我们…

P4047 部落划分

这题太水了吧&#xff0c;不知道怎么蓝的&#xff0c;蒟蒻只写了十五分钟就一次AC了…… 但是挺有意思&#xff0c;就发篇题解吧qwq emmm……最小生成树&#xff08;贪心&#xff09;&#xff0c;就没别的了…… 要明确&#xff1a; 一开始可以把每个点都看成一个部落&#xff…