javascript-离线应用于客户端存储

数字银月渡
• 阅读 1592

23.1 离线检测

含义:设备能否上网
代码:

  navigator.onLine

注:IE6+和safari+5,firefox3+和opera16+,chrome最新的没问题

23.2 应用缓存

缓存的目的是专门为网页离线设计的,当然在在线情况也会缓存

机制:当用户在地址输入请求的地址去请求网页时,浏览器会先本地缓存中查看是否有对应的缓存文件,如果有然后查看‘新鲜度’就是是否过期了,如果过期了此时也不会去请求新的资源而是去与服务器端进行校验核对服务器端有没有更新的资源如果有则去请求没有就更新‘新鲜度’, 新鲜度由响应时服务器告诉浏览器或者在返回的html中加meta属性告诉浏览器,不过meta属性通常是针对本地静态文件

(1) 离线缓存方法(我也没实现,想一想都离线了还让用户看啥,毕竟浏览器都有很好的网断界面):

<html manifest="/e.manifest">

23.3 数据存储

(1) Cookie

为什么:cookie的存在让服务器和客户端有了一种通讯方式,因为http是无状态的,可以通过cookie让服务器鉴别当前用户,cookie的值存储在客户端本地(java创建的cookie存在于响应头,而javascript创建的cookie存在于请求头)注:cookie的存取的前提是页面在服务中而不是本地文件

如何做(javascript):赋值:document.cookie = 'name=jiang;expires=Thu, 18 Dec 2043 12:00:00 GMT';读取:document.cookie;cookie没有提供删除的api,销毁的间接方法是重新为对应cookie赋值,并将过期时间设为之前的一个时间,默认是浏览器关闭销毁

限制:cookie在每个域名下的数量是有限制的,各个浏览器限制的数量不一样最少的是20,最多的chrome无限制,cookie的大小限制各个浏览器也不同,基本是4096+-1,也就是一个域名下的cookie大小在这个范围内

**注**:碰到cookie数量的限制问题可以通过‘子cookie’来解决,思路是cookie中键-值中值是另一个键值

(2) Storage类型

为什么:同样是存储,Cookie比Storage出现的早,那么Storage的出现一定是为了弥补Cookie的某些不足了,比如数量和大小的限制

如何做:Storage提供了一些API,clear(),getItem(name),key(index),removeItem(name),setItem(name,value)

1、 sessionStorage对象
特点:声明周期是浏览器关闭前,访问域是最初建立的页面,只存在与服务器上资源本地静态资源不支持,大小限制大部分是2.5M,IE8,opera是5M

2、globalStorage[]对象
特点:跨越回话限制,可以指定访问域和持久存储

示例:
```
globalStorage['wrox.com'].name = 'jiang'; // 指定访问域
```
**注**:指定的域名有同源策略,就是协议和端口要保持一致

3、 localStorage对象
特点:localStorage是globalStorage替代品,localStorage对象不能指定访问域并且有同源策略,大小限制是chrome和safari 是2.5M其它大部分是5M
**注**:更大量的数据可以通过indexDB存储
点赞
收藏
评论区
推荐文章
Karen110 Karen110
3年前
一篇文章带你了解JavaScript日期
日期对象允许您使用日期(年、月、日、小时、分钟、秒和毫秒)。一、JavaScript的日期格式一个JavaScript日期可以写为一个字符串:ThuFeb02201909:59:51GMT0800(中国标准时间)或者是一个数字:1486000791164写数字的日期,指定的毫秒数自1970年1月1日00:00:00到现在。1\.显示日期使用
待兔 待兔
11个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Stella981 Stella981
3年前
Android So动态加载 优雅实现与原理分析
背景:漫品Android客户端集成适配转换功能(基于目标识别(So库35M)和人脸识别库(5M)),导致apk体积50M左右,为优化客户端体验,决定实现So文件动态加载.!(https://oscimg.oschina.net/oscnet/00d1ff90e4b34869664fef59e3ec3fdd20b.png)点击上方“蓝字”关注我
Wesley13 Wesley13
3年前
IM 消息服务架构
IM消息架构主要有1、消息redis缓存队列及用户信息memcache2、消息的数据落地(入库mysql)3、消息的发送4、离线消息服务5、过期消息服务消息redis缓存队列服务端落地队列1.客户端通过HTTPS
Stella981 Stella981
3年前
Pre
PAT甲级1119,我先在CSDN上面发布的这篇文章:https://blog.csdn.net/weixin\_44385565/article/details/89737224(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fblog.csdn.net%2Fweixin_443855
子桓 子桓
1年前
最好用的卸载工具:App Cleaner & Uninstaller Pro中文最新
AppCleaner&UninstallerPro是一款专门为Mac用户设计的应用程序清理和卸载工具。它可以帮助用户彻底清理Mac上的应用程序,包括相关的文件、缓存和插件,从而释放存储空间并提升系统性能。以下是AppCleaner&UninstallerP
如何在服务端发送 SDK 提供的自定义消息
根据存储策略来设置对应的objectNameRC:IWNormalMsg:客户端存储,支持离线消息机制,且存入服务端历史消息,计入未读消息数RC:IWCmdMsg:客户端不存储,支持离线消息机制,不计入未读消息数RC:IWStatusMsg:客户端不存储,
融云IM即时通讯 融云IM即时通讯
7个月前
融云IM干货丨IM服务聊天室中离线消息同步需要多久一次?
关于离线消息同步的频率,根据搜索结果,这里有几个关键点可以提供参考:离线消息的获取是自上而下的方式(按时间序),客户端一次获取200条离线消息,如果离线消息过多,则会分页多次拉取。客户端拉取离线消息时,需要带上当前客户端缓存的消息的最大时间戳,服务器会根据
美凌格栋栋酱 美凌格栋栋酱
4个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
数字银月渡
数字银月渡
Lv1
只是后来我们依然孤单,你换了几站,我依然流浪
文章
4
粉丝
0
获赞
0