本地缓存

缓存 - 图1

更新时间:2024-01-15 16:29:36
文档 属性·动作·事件

功能概述


缓存系统用于在本地浏览器内-缓存一些数据,主要分为三类
  • Cookie 管理:可在本地 cookies 中添加键值,进行读取、删除,常用于保存用户的登录信息、浏览历史等,当达到设置的过期时间时将会被清除,cookie 数据在同源页面间共享;
  • 本地存储(local Strorage):以添加键值对的形式保存信息至浏览器,可在不影响 Web 浏览器性能的情况下、长时间保存大量数据;
  • 会话存储(session Storage):和本地存储基本一致,但是会话存储的保存-仅限于当前窗口的访问,关闭窗口会清空数据。

本地缓存无需从组件栏加入使用,请在选择对象下拉框中进行选择。
缓存 - 图2

缓存详解


1.Cookie
Cookie 是服务器保存在浏览器的一小段文本信息。 浏览器每次向服务器发出请求,就会自动附上Cookie内的信息,因而 Cookie 的大小一般不能超过4KB。
Cookie 主要用来分辨两个请求-是否来自同一个浏览器,以及用来保存一些状态信息。 它的常用场合有以下一些:

(1) 对话(session)管理:保存登录、购物车等需要记录的信息;
(2) 个人信息: 存储用户名密码相关信息,一般使用escape转义编码后存储.
(2) 个性化:保存用户的偏好,比如网页的字体大小、背景色等等;
(3) 追踪:记录和分析用户行为;

Cookie主要是用于服务端获取, 但浏览器端也能获取, 且一般都是存储的一些敏感信息, 因此建议加密后存储 以增加安全性。
2.localStorage和sessionStorage
这两个方法都可以在浏览器中保存数据, 而且数据大小比cookie要大得多, cookie是每次发起请求-都会附带着发送给服务器的键值对数据; 而local storage 和 session storage本身只保存在浏览器内,不会跟随请求发往服务器。 但是我们在使用时仍需根据其特性差异来进行选择:
sessionStorage保存的数据-用于浏览器的一次会话(session),当会话结束(通常是窗口关闭),数据被清空
localStorage保存的数据长期存在,下一次访问该网站的时候,网页可以直接读取以前保存的数据。
因而两种缓存也各自有不同的适用场景:
(1) Local Storage
存储的数据就算窗口或浏览器关闭, 第二次打开也会存在(清除浏览器缓存后会消失).
可以用来统计页面访问次数 \ 小说或新闻网站的预览内容 \ 只在前端使用的数据 \ 文章编辑界面的草稿保存等
(2) Session Storage
存储的数据在当前窗口关闭后会立刻清除, 适用于那些页面过程数据较多, 但不适合长时间存储的数据; Session Storage不跨窗口,在另外一个窗口打开相同的页面 其sessionStorage也不共享, 而Cookie 和 LocalStorage都是跨同源窗口有效的.
可以使用这种方法统计当前页面元素的点击次数 \ 存储临时性的缓存数据 \ 存储不适合长时间保存, 但数据量又大于4KB的数据
以上的Cookie、localStorage和sessionStorage,均可以通过访问浏览器控制台的Application来进行查看。
缓存 - 图3

基本用法


缓存系统对三种缓存数据的支持都一致,调用的方法也完全相同(设置、获取与删除),以下使用Cookie为例-进行说明:

1.设置缓存

向缓存传入键值对-即为写入的过程,可设置单个或多个cookie。
缓存 - 图4

2.获取缓存

通过存储是所用的Key值来获取对应的键值,并将获取到数据赋值给选中的输出对象。
缓存 - 图5

3.删除缓存

删除缓存数据-也是根据Key值来进行筛选,将传入Key值所对应的键值-从缓存中清除掉。


缓存 - 图6

4.其他操作

localStorage和sessionStorage操作-如cookie一致。
缓存 - 图7

动作(名称与参数)表

动作名称 动作说明 动作参数 动作参数说明 设置cookie 为浏览器设置当前域名下的cookie,需要传入Key和对应的值。 不支持在安卓、iOS及win/Mac应用中使用。 有效路径 默认为空,即当前应用的路径,如果填了之后,就限制只有在这个路径下cookie才能被读取到。可以填“/”,即有效域名下所有路径都可以访问。 有效域名 默认为空,即当前应用的域名,填了以后,可以限制有效域名下的应用才可以访问cookie 有效期 max-age,即cookie存在的有效期,以秒为单位。 有两种场景: 1.为正数时 cookie从创建那一刻开始存活,有效秒之后被删除。 2.为0或者负数时 如果当前浏览器里有同名cookie,则删除该cookie。 如果该浏览器里没有同名cookie,则不创建。 Key cookie的键名。 cookie的键值。 设置多个cookie 为浏览器设置当前域名下的cookie,可传入多对Key和对应的值。 不支持在安卓、iOS及win/Mac应用中使用。 有效路径 默认为空,即当前应用的路径,如果填了之后,就限制只有在这个路径下cookie才能被读取到。可以填“/”,即有效域名下所有路径都可以访问。 有效域名 默认为空,即当前应用的域名,填了以后,可以限制有效域名下的应用才可以访问cookie 有效期 max-age,即cookie存在的有效期,以秒为单位。 有两种场景: 1.为正数时 cookie从创建那一刻开始存活,有效秒之后被删除。 2.为0或者负数时 如果当前浏览器里有同名cookie,则删除该cookie。 如果该浏览器里没有同名cookie,则不创建。 键值对 传入并要设置为cookie的键值对,可以添加多个。 获取cookie 获取当前域名下的cookie,需传入cookie的Key来提取。 不支持在安卓、iOS及win/Mac应用中使用。 Key cookie的键名。 删除cookie 删除当前域名下的cookie某个键值对,需传入要删除的键值对的Key。 不支持在安卓、iOS及win/Mac应用中使用。 Key cookie的键名。 设置会话存储(sessionStorage) 为当前标签页设置sessionStorage,需要传入Key和对应的值。 Key sessionStorage的键名。 sessionStorage的键值。 获取会话存储(sessionStorage) 获取当前标签页的sessionStorage,需传入Key来提取。 Key sessionStorage的键名。 删除会话存储(sessionStorage) 删除当前标签页下的某个sessionStorage键值对,需传入要删除的键值对的Key。 Key sessionStorage的键名。 设置本地存储(localStorage) 为当前域名设置LocalStorage,需要传入Key和对应的值。 Key localStorage的键名。 localStorage的键值。 获取本地存储(localStorage) 获取当前域名下的localStorage的键值对,需传入Key来提取。 Key localStorage的键名。 删除本地存储(localStorage) 删除当前域名下的某个localStorage键值对,需传入要删除的键值对的Key。 Key localStorage的键名。

动作(回调)表

对应动作 结果引用 结果状态 结果引用属性 结果属性说明 获取cookie 获取结果 完成 -/- 获取会话存储(sessionStorage) 获取结果 完成 -/- 获取本地存储(localStorage) 获取结果 完成 -/-