在漫长的前端开发过程中,我们常用的几种本地缓存机制:Cookie,LocalStorge,SessionStorge

1.Cookie的特点

  • 1)cookie的大小受限制,cookie大小被限制在4KB,不能接受像大文件或邮件那样的大数据。

  • 2)只要有请求涉及cookie,cookie就要在服务器和浏览器之间来回传送(这解释为什么本地文件不能测试cookie)。而且cookie数据始终在同源的http请求中携带(即使不需要),这也是Cookie不能太大的重要原因。正统的cookie分发是通过扩展HTTP协议来实现的,服务器通过在HTTP的响应头中加上一行特殊的指示以提示浏览器按照指示生成相应的cookie。

  • 3)用户每请求一次服务器数据,cookie则会随着这些请求发送到服务器,服务器脚本语言如PHP等能够处理cookie发送的数据,可以说是非常方便的。当然前端也是可以生成Cookie的,用js对cookie的操作相当的繁琐,浏览器只提供document.cookie这样一个对象,对cookie的赋值,获取都比较麻烦。而在PHP中,我们可以通过setcookie()来设置cookie,通过$_COOKIE这个超全局数组来获取cookie。

cookie的内容主要包括:名字,值,过期时间,路径和域。路径与域一起构成cookie的作用范围。若不设置过期时间,则表示这个cookie的生命期为浏览器会话期间,关闭浏览器窗口,cookie就消失。这种生命期为浏览器会话期的cookie被称为会话cookie。会话cookie一般不存储在硬盘上而是保存在内存里,当然这种行为并不是规范规定的。若设置了过期时间,浏览器就会把cookie保存到硬盘上,关闭后再次打开浏览器,这些cookie仍然有效直到超过设定的过期时间。存储在硬盘上的cookie可以在不同的浏览器进程间共享,比如两个IE窗口。而对于保存在内存里的cookie,不同的浏览器有不同的处理方式。

2. Session

说到Cookie就不能不说Session。

Session机制。session机制是一种服务器端的机制,服务器使用一种类似于散列表的结构(也可能就是使用散列表)来保存信息。当程序需要为某个客户端的请求创建一个session时,服务器首先检查这个客户端的请求里是否已包含了一个session标识(称为session id),如果已包含则说明以前已经为此客户端创建过session,服务器就按照session id把这个session检索出来使用(检索不到,会新建一个),如果客户端请求不包含session id,则为此客户端创建一个session并且生成一个与此session相关联的session id,session id的值应该是一个既不会重复,又不容易被找到规律以仿造的字符串,这个session id将被在本次响应中返回给客户端保存。保存这个session id的方式可以采用cookie,这样在交互过程中浏览器可以自动的按照规则把这个标识发送给服务器。一般这个cookie的名字都是类似于SEEESIONID。但cookie可以被人为的禁止,则必须有其他机制以便在cookie被禁止时仍然能够把session id传递回服务器。经常被使用的一种技术叫做URL重写,就是把session id直接附加在URL路径的后面。比如:http://damonare.cn?sessionid=123456还有一种技术叫做表单隐藏字段。就是服务器会自动修改表单,添加一个隐藏字段,以便在表单提交时能够把session id传递回服务器。比如:

1
2
3
4
<form name="testform" action="/xxx">
<input type="hidden" name="sessionid" value="123456">
<input type="text">
</form>

实际上这种技术可以简单的用对action应用URL重写来代替。

3 Cookie和Session简单对比

Cookie和Session 的区别:

  • 1)cookie数据存放在客户的浏览器上,session数据放在服务器上。

  • 2)cookie不是很安全,别人可以分析存放在本地的cookie并进行cookie欺骗,考虑到安全应当使用session。

  • 3)session会在一定时间内保存在服务器上。当访问增多,会比较占用你服务器的性能考虑到减轻服务器性能方面,应当使用cookie。

  • 4)单个cookie保存的数据不能超过4K,很多浏览器都限制一个站点最多保存20个cookie。
  • 5)所以建议:
    • 将登陆信息等重要信息存放为SESSION
    • 其他信息如果需要保留,可以放在cookie中

4 document.cookie的属性

expires属性

指定了coolie的生存期,默认情况下coolie是暂时存在的,他们存储的值只在浏览器会话期间存在,当用户推出浏览器后这些值也会丢失,如果想让cookie存在一段时间,就要为expires属性设置为未来的一个过期日期。现在已经被max-age属性所取代,max-age用秒来设置cookie的生存期。

path属性

它指定与cookie关联在一起的网页。在默认的情况下cookie会与创建它的网页,该网页处于同一目录下的网页以及与这个网页所在目录下的子目录下的网页关联。

domain属性

domain属性可以使多个web服务器共享cookie。domain属性的默认值是创建cookie的网页所在服务器的主机名。不能将一个cookie的域设置成服务器所在的域之外的域。例如让位于order.damonare.cn的服务器能够读取catalog.damonare.cn设置的cookie值。如果catalog.damonare.cn的页面创建的cookie把自己的path属性设置为“/”,把domain属性设置成“.damonare.cn”,那么所有位于catalog.damonare.cn的网页和所有位于orlders.damonare.cn的网页,以及位于damonare.cn域的其他服务器上的网页都可以访问这个cookie。

secure属性

它是一个布尔值,指定在网络上如何传输cookie,默认是不安全的,通过一个普通的http连接传输

5. localStorage

这是一种持久化的存储方式,也就是说如果不手动清除,数据就永远不会过期。
它也是采用Key - Value的方式存储数据,底层数据接口是sqlite,按域名将数据分别保存到对应数据库文件里。它能保存更大的数据(IE8上是10MB,Chrome是5MB),同时保存的数据不会再发送给服务器,避免带宽浪费。

localStorage的属性方法

下表是localStorge的一些属性和方法

属性方法 说明
localStorage.length 获得storage中的个数
localStorage.key(n) 获得storage中第n个元素对的键值(第一个元素是0)
localStorage.getItem(key) 获取键值key对应的值
localStorage.key 获取键值key对应的值
localStorage.setItem(key, value) 添加数据,键值为key,值为value
localStorage.removeItem(key) 移除键值为key的数据
localStorage.clear() 清除所有数据

localStorage的缺点

  • ① localStorage大小限制在500万字符左右,各个浏览器不一致
  • ② localStorage在隐私模式下不可读取
  • ③ localStorage本质是在读写文件,数据多的话会比较卡(firefox会一次性将数据导入内存,想想就觉得吓人啊)
  • ④ localStorage不能被爬虫爬取,不要用它完全取代URL传参

6. sessionStorage

和服务器端使用的session类似,是一种会话级别的缓存,关闭浏览器会数据会被清除。不过有点特别的是它的作用域是窗口级别的,也就是说不同窗口间的sessionStorage数据不能共享的。使用方法(和localStorage完全相同):

属性方法 说明
sessionStorage.length 获得storage中的个数
sessionStorage.key(n) 获得storage中第n个元素对的键值(第一个元素是0)
sessionStorage.getItem(key) 获取键值key对应的值
sessionStorage.key 获取键值key对应的值
sessionStorage.setItem(key, value) 添加数据,键值为key,值为value
sessionStorage.removeItem(key) 移除键值为key的数据
sessionStorage.clear() 清除所有数据

7. sessionStorage和localStorage的区别

  • sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。当用户关闭浏览器窗口后,数据立马会被删除。

  • localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。第二天、第二周或下一年之后,数据依然可用。

原文地址:http://damonare.github.io/2016/11/16/Javascript%E6%9C%AC%E5%9C%B0%E5%AD%98%E5%82%A8%E5%B0%8F%E7%BB%93/

前端几种本地缓存机制相关推荐

  1. iOS五种本地缓存数据方式

    iOS五种本地缓存数据方式 iOS本地缓存数据方式有五种:前言 1.直接写文件方式:可以存储的对象有NSString.NSArray.NSDictionary.NSData.NSNumber,数据全部 ...

  2. 使用缓存实现前端性能优化——浏览器缓存机制、缓存分类

    前端性能优化探讨及浏览器缓存机制 一.缓存如何实现前端性能优化 1.什么是浏览器缓存 2.js请求,一般会有哪些地方有缓存处理? 3.静态资源 ① 什么是静态资源 ② 静态资源的缓存策略 二.缓存的类 ...

  3. 设计一个移动应用的本地缓存机制

    在手机应用程序开发中,为了降低与服务端的交互次数,加快用户的响应速度,一般都会在iOS设备中加一个缓存的机制,前面一篇文章介绍了iOS设备的内存缓存.这篇文章将设计一个本地缓存的机制. 功能需求 这个 ...

  4. 前端面试系列-浏览器缓存机制

    缓存位置 从缓存位置上来说分为四种,并且各自有优先级,当依次查找缓存且都没有命中的时候,才会去请求网络 Service Worker Memory Cache Disk Cache Push Cach ...

  5. 前端三种本地存储方式+indexedDB浏览器数据库存储

    1.cookie存储: 特征:1.不同的浏览器存放的cookie位置不一样,也是不能通用的.2.cookie的存储是以域名形式进行区分的,不同的域下存储的cookie是独立的.3.我们可以设置cook ...

  6. 前端缓存 (http缓存 与 本地缓存)

    前端缓存主要是分为http缓存和本地缓存 http 缓存 强缓存:Expires(过期时间)/ Cache-Control(no-cache)(优先级高) 协商缓存:Last-Modified/Eta ...

  7. GUAVA本地缓存01_概述、优缺点、创建方式、回收机制、监听器、统计、异步锁定

    文章目录 ①. 本地缓存 - 背景 ②. 本地缓存 - 优缺点 ③. Guava Cache介绍 ④. Guava - 三种创建方式 ⑤. Guava - 如何回收缓存 ⑥. Guava - 移除监听 ...

  8. 高并发技巧-redis和本地缓存使用技巧

    在这篇文章中,我主要介绍的是分布式缓存和本地缓存的使用技巧,包括缓存种类介绍,各种的使用场景,以及如何使用,最后再给出实战案例. 众所周知,缓存最主要的目的就是加速访问,缓解数据库压力.最常用的缓存就 ...

  9. 前端获取浏览器标识_浏览器缓存机制

    最近在项目中遇到了 IE浏览器因缓存问题未能成功向后端发送 GET类型请求 的bug,然后顺藤摸瓜顺便看了看缓存的知识,觉得有必要总结跟大家分享一下. 在前端开发中,性能一直都是被大家所重视的一点,然 ...

  10. h5手机端浏览器机制_H5 浏览器的9种缓存机制

    前言 打开浏览器的Application面板,可看到HTTP文件缓存(Frames下),Local Storage,Session Storage,indexDB,Web SQL,Cookie,Cac ...

最新文章

  1. Tensorflow警告:our CPU supports instructions that this TensorFlow binary was not compiled to use: AVX2
  2. 18、Java Swing JMenu和JPopupMenu:菜单和弹出式菜单
  3. 快来mark! 结构体重载运算符大全(运算、比较、赋值、输入输出)
  4. SQL-Server使用点滴(一-数据对象篇)
  5. 大数据中mapreduce的核心,shuffle的理解,以及在shuffle中的优化问题
  6. 书店管理系统(C++初学者友好版)
  7. c语言初学者程序,C语言初学者必懂的100个范例程序
  8. CVS版本控制-冲突解决方法
  9. python的pyaudio教程入门_Python音频操作工具PyAudio上手教程详解
  10. rn 视频播放组件react-native-video
  11. html5shiv源码,前端开发必配置:html5shiv.js和respond.min.js的作用说明!
  12. database2sharp mysql_Database2Sharp免费版
  13. 多系统引导启动项详解和更改启动内核的方法
  14. 【微信小程序控制硬件⑥ 进阶篇】服务器如何集成七牛云存储SDK,把用户自定义设备图片存储在第三方服务器!
  15. Python学习,第一课(基础知识,利用urllib库入门)
  16. 解决es中must,must_not,should不能同时生效
  17. mysql 启动和关闭
  18. 关于淘宝的数据库系统【转】
  19. lorawan的工作原理_详解LoRaWAN网络架构和协议内容
  20. OpenSees2.3.0 用vs2012编译

热门文章

  1. 关于PS的一些常用技巧
  2. 各种深度摄像头的使用经验粗谈
  3. 什么是自媒体、自媒体平台???
  4. 关于二维数组传参问题
  5. 微信公众平台Js API实现微信分享
  6. 计算机二级背景图设置,计算机二级。 ppt2010。 背景图片,柔化边缘椭圆 图片样式效果 怎么弄??...
  7. photoshop之小技巧
  8. html 点击方块旋转,前端每日实战:86# 视频演示如何用纯 CSS 创作一个方块旋转动画...
  9. 计算机主板 上电顺序,BIOS很熟悉,电脑开机BIOS开机自检顺序你知道吗?
  10. 沟通的艺术I:什么是沟通