前端缓存方法实现—cookie/sessionStorage/localStorage

前端存储有localStorage、sessionStorage、cookie三种方式。

那么它们各自的缓存方法是如何实现的呢？本文将以cookie为主来实现缓存方法。

一、cookie

document.cookie 属性看起来像一个普通的文本字符串，其实它不是。读取该 cookie 信息时，cookie 信息是以名/值对的形式展示的。

1）cookie的设置
关于过期时间：默认情况下，cookie 在浏览器关闭时删除；
关于路径：默认情况下，cookie 属于当前页面。（cookie的另一属性domain是对应服务器的，服务器下面包含路径）

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

2）读取cookie

var myCookie = document.cookie;

3）修改cookie
修改 cookie 类似于创建 cookie，旧的cookie将被覆盖。

document.cookie="username=John Smith; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

4）删除cookie
只需要设置 expires 参数为以前的时间即可。

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

cookie创建、读取和展示的完整实例方法实现见下（有参考）。

function setCookie(cname,cvalue,exdays){var d = new Date();d.setTime(d.getTime()+(exdays*24*60*60*1000)); // 得到GMT时间var expires = "expires="+d.toGMTString();document.cookie = cname+"="+cvalue+"; "+expires;
}function getCookie(cname){var name = cname + "=";var ca = document.cookie.split(';');for(var i=0; i<ca.length; i++) {var c = ca[i].trim();if (c.indexOf(name)==0) { return c.substring(name.length,c.length); }}return "";
}function checkCookie(){var user=getCookie("username");if (user!=""){alert("欢迎 " + user + " 再次访问");}else {user = prompt("请输入你的名字:","");if (user!="" && user!=null){setCookie("username",user,30);}}
}

二、sessionStorage、localStorage

两者类似，下面仅以localStorage为例说明。
localStorage本质上是对字符串的读取，有Json格式时需要JSON.stringify()转化为字符串。
1）存储数据

localStorage.setItem('key', 'value');

2）读取数据

localStorage.getItem('key');

3）删除数据

localStorage.removeItem('key');

4）更改数据

localStorage.setItem('key', 'newValue');

前端缓存方法实现—cookie/sessionStorage/localStorage相关推荐

session,cookie,sessionStorage,localStorage的区别及应用场景
浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式,可以利用cookie,session等跟服务端进行数据交互. 一.cookie和session cookie和session都是用来跟踪浏览器 ...
浅谈session,cookie,sessionStorage,localStorage的区别及应用场景
浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式,可以利用cookie,session等跟服务端进行数据交互. 一.cookie和session cookie和session都是用来跟踪浏览器 ...
前端缓存浏览器存储
目录前言一.浏览器存储 0.bfcache 1.WebStorage (1).sessionStorage 对象 (2).localStorage 对象 2.Cookie (1).cookie 与 ...
前端cookie、localStorage、sessionStorage缓存技术总结
前端cookie.localStorage.sessionStorage缓存技术总结转载自:https://www.cnblogs.com/belove8013/p/8134067.html 1.C ...
前端本地缓存知识：indexDB、localStorage、sessionStorage
前端缓存在实习的时候接触过一个需求是,要求用户在离线状态下也能打开客户端查看部分数据,并对数据进行操作,在联网后向服务器同步操作更新服务器的数据.因此在对前端如何实现在本地存储数据及读写进行调研,了 ...
前端存储之cookie、localStorage、sessionStorage、indexDB
cookie Cookie 是小甜饼的意思.顾名思义,cookie 确实非常小,它的大小限制为4KB左右,是网景公司的前雇员 Lou Montulli 在1993年3月的发明.它的主要用途有保存登录信 ...
页面之间跳转传参数不使用cookie和url的方法,sessionStorage,localStorage
页面之间跳转传参数不使用cookie和url的方法,sessionStorage,localStorage 刚步入工作不久的小白,最近在做一个传感器网站项目的时候是用cookie存取数据,因为网站面向 ...
html5 localstorage 生命周期,cookie、localStorage和sessionStorage 三者之间的区别以及存储、获取、删除等使用方式...
写在前面: 前端开发的供个到效近一项消果近一项消果近一项消果近时候,在网页刷新的时候,所有数据都会被清空,这时候就要用到本地存储的技术,前端本地存储的方式有三种,分别是cookie,localstor ...
本地存储三种方式cookie、localStorage、sessionStorage的详细介绍
前言网页刷新的时候数据会被清空,这时候就需要用到存储技术.前端本地存储的方式有三种,分别是cookie.localStorage.sessionStorage.在前端面试过程中,经常会被问及这些存储 ...
【HTTP】Cookie、 LocalStorage 与 SessionStorage基本概念
说到浏览器本地缓存,我们就必须提到cookie,在HTML5标准之前,只能使用cookie进行浏览器缓存数据.HTML5之后提出了webstorage,webstorage又分为localstorag ...

前端缓存方法实现—cookie/sessionStorage/localStorage

一、cookie

二、sessionStorage、localStorage

前端缓存方法实现—cookie/sessionStorage/localStorage相关推荐

最新文章

热门文章