你除了在客户端上会使用Cookie,还能使用哪些可以作为数据缓存呢?
问题如标题,直奔主题.介绍下另两种缓存.
1.sessionStorage、localStorage
localStorage: 是一种你不主动清除它,它会一直将存储数据存储在客户端的存储方式,即使你关闭了客户端(浏览器),属于本地持久层储存
sessionStorage: 用于本地存储一个会话(session)中的数据,一旦会话关闭,那么数据会消失,比如刷新。
有时候,我们需要将数据存储到sessionStorage和localStorage中,这样做的好处有:
1 缓存数据
2 减少对内存的占用
但是,storage只能存储字符串的数据,对于JS中常用的数组或对象却不能直接存储。
它能保存更大的数据(IE8上是10MB,Chrome是5MB),同时保存的数据不会再发送给服务器,避免带宽浪费。
localStorage存储方法(sessionStorage类似) 存取清方式如下:
存:
localStorage.name =’vanida;
localStorage[“name”]=’vanida’;
localStorage.setItem(“name”,”vanida”);
//这三种设置值方式是一样的;
取:
localStorage获取值方法
var name = localStorage[“name”]
var name= localStorage.name
var name= localStorage.getItem(“name”);
//这三种获取值方式是一样的;
清:
localStorage清除特定值方法
//清除name的值
localStorage.removeItem(“name”);
localStorage.name=”;
localStorage清除所有值方法
localStorage.clear()
对象转json存储:
localStorage只能存储字符串,如果需要存储对象,首先要转化为字符串。利用JSON.stringify();
var person = {name:”vanida”,”sex”:”girl”,”age”:25};
localStorage.setItem(“person”,JSON.stringify(person));
// localStorage.person=”{“name”:”vanida”,”sex”:”girl”,”age”:25}”
然后取出person的对象你可以用JSON.parse();
person = JSON.parse(localStorage.getItem(“person”));
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
下面是我写的cache.js:对原始进行局部封装:
//获取cookie的值
function getCookieVale(cookieObj, strCookie) {
var cookieValu = "";
strCookie = $.trim(strCookie);
var arrCookie = cookieObj.split(";");
for (var i = 0; i < arrCookie.length; i++) {
var arr = arrCookie[i].split("=");
if (strCookie == $.trim(arr[0])) {
cookieValu = $.trim(arr[1]);
break;
}
}
return cookieValu;
} //获取缓存信息
function getStory(itemCode) {
return JSON.parse(sessionStorage.getItem(itemCode));
}
//删除缓存信息
function removeStory(itemCode) {
sessionStorage.removeItem(itemCode);
} //设置缓存信息
function setStory(itemCode, itemValu) {
sessionStorage.setItem(itemCode, JSON.stringify(itemValu));
}
//清空session
function clearSessionStroy(){
sessionStorage.clear();
} function clearLoclStory(){
localStorage.clear();
} function getLoclStory(itemCode) {
return JSON.parse(localStorage.getItem(itemCode));
}
//删除缓存信息
function removeLoclStory(itemCode) {
localStorage.removeItem(itemCode);
} //设置缓存信息
function setLoclStory(itemCode, itemValu) {
localStorage.setItem(itemCode, JSON.stringify(itemValu));
}
你除了在客户端上会使用Cookie,还能使用哪些可以作为数据缓存呢?的更多相关文章
- 前端学HTTP之客户端识别和cookie
前面的话 Web服务器可能会同时与数千个不同的客户端进行对话.这些服务器通常要记录下它们在与谁交谈,而不会认为所有的请求都来自匿名的客户端.本文主要介绍客户端识别及cookie机制 HTTP首部 HT ...
- JavaScript 客户端JavaScript之cookie和客户端持久性
Document对象都有一个cookie属性,它使得JavaScript代码能够在用户的硬盘上持久地存储数据, 并且能够获取以这种方式存储的数据.客户端持久性是赋予WEB应用程序记忆力的一种简单方法. ...
- HTTP客户端识别与Cookie机制
HTTP识别用户的几种技巧 承载用户身份信息的HTTP首部 客户端IP地址跟踪,通过用户的IP地址对其进行识别 用户登录,用认证方式识别用户 胖URL,一种在URL中潜入识别信息的技术 cookie, ...
- 离线应用与客户端存储(cookie storage indexedDB)
离线检测 HTML5定义一个属性:navigator.onLine的属性.这个属性值为true,表示设备在线,值为false,表示设备离线.为了更好的确定网络是否可用,HTML5还定义了两个事件.这两 ...
- 和我一起学《HTTP权威指南》——客户端识别与cookie机制
客户端识别与cookie机制 服务器需要区别是哪个客户端. 个性化接触 HTTP是匿名.无状态的请求/响应协议. Web站点希望: 对客户端的用户有更多的了解 追踪用户浏览页面的行为 因此,产生了几种 ...
- 客户端技术:Cookie 服务端技术:HttpSession
客户端技术:Cookie 服务端技术:HttpSession 07. 五 / android基础 / 没有评论 一.会话技术1.什么是会话:客户打开浏览器访问一个网站,访问完毕之后,关闭浏览器.这 ...
- 如果客户端禁用了cookie,如何实现session
虽然客户端禁用了cookie,那么当访问某一个php文件时,php会先查找php.ini,如果session.use_trans_sid=1/session.use_only_cookie=0,php ...
- seata服务端和客户端配置(使用nacos进行注册发现,使用mysql进行数据持久化),以及过程中可能会出现的问题与解决方案
seata服务端和客户端配置(使用nacos进行注册发现,使用mysql进行数据持久化),以及过程中可能会出现的问题与解决方案 说明: 之所以只用nacos进行了注册与发现,因为seata使用naco ...
- HTTP的客户端识别与cookie机制
本文是<HTTP权威指南>的读书笔记 Web服务器可能同时在与数千个客户端同时进行会话,服务器需要记录下它们在与谁交谈,而不是认为所有的请求都来自于匿名客户端.在HTTP中可以有以下几种方 ...
随机推荐
- CF1153F Serval and Bonus Problem 【期望】
题目链接:洛谷 作为一只沉迷数学多年的蒟蒻OIer,在推柿子和dp之间肯定要选推柿子的! 首先假设线段长度为1,最后答案乘上$l$即可. 对于$x$这个位置,被区间覆盖的概率是$2x(1-x)$(线段 ...
- mysql建表问题
PUBLIC Stack Overflow Tags Users Jobs TeamsQ&A for workLearn More MySQL error: The maximum col ...
- JavaWeb_(Mybatis框架)输入和输出参数_五
系列博文: JavaWeb_(Mybatis框架)JDBC操作数据库和Mybatis框架操作数据库区别_一 传送门 JavaWeb_(Mybatis框架)使用Mybatis对表进行增.删.改.查操作_ ...
- CF1200C
CF1200C 题意: 问内圆和外圆分别分成n.m份,每份有标号,问是否可以从一个部分走到另一个部分,12点钟位置一定有个线. 解法: 如果有一堵墙贯穿1和2,那么会使得两边不连通.这样的墙会显然出现 ...
- Hadoop 3.2.1 win10 64位系统 vs2015 编译
Hadoop 3.2.1 win10 64位系统 vs2015 编译 1 环境配置 1.1 JDK下载安装 1.1.1 下载 JDK 1.8 (jdk1.8.0 ...
- Ubuntu验证查看库的安装情况
以下是ubuntu系统安装完成一些库后,验证查看各个库的安装情况. 1. CUDA8.0 yuanlibin@yuanlibin:~$ nvcc -V nvcc: NVIDIA (R) Cuda co ...
- fsLayuiPlugin附件上传使用说明
fsLayuiPlugin 是一个基于layui的快速开发插件,支持数据表格增删改查操作,提供通用的组件,通过配置html实现数据请求,减少前端js重复开发的工作. GitHub下载 码云下载 测试环 ...
- 微信小程序倒计时的方法
timeOut: function(time) { var that = this; var end = new Date(time).getTime(); var Interval = setInt ...
- flutter中的异步机制 Future
饿补一下Flutter中Http请求的异步操作. Dart是一个单线程语言,可以理解成物理线路中的串联,当其遇到有延迟的运算(比如IO操作.延时执行)时,线程中按顺序执行的运算就会阻塞,用户就会感觉到 ...
- Facebook币Libra学习-3.小试牛刀第一笔交易
我们提供了一个命令行界面(CLI)客户端来与区块链进行交互. 假设 本文档中的所有命令均假定: 您运行的是Linux(基于Red Hat或Debian)或macOS系统. 您可以稳定地连接到互联网. ...