在开发中发现cookie储存会在http请求头中,大大影响了数据请求交互。
现在h5中提供了新的解决方式(API)

存储方式:
1.本地储存 localstorage & sessionstorage;
2.离线储存 application cache;
3.浏览器数据库 indexedDB;

学习及使用判断:
这个是浏览器兼容查询网站:http://caniuse.com/
图一 : localstorage & sessionstorage 兼容性

下面不再贴图
application cache 兼容性为 90.44%
indexedDB 兼容性为 79%

下面是localstorage & sessionstorage 的使用:

时效性:
localStorage - *没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储

API :
localStorage.getItem(‘key’,’val’) - 取得
localStorage.setItem(‘key’) - 设置
localStorage.removeItem(‘key’) - 移除
localStorage.key(0) - 取key值
localStorage.clear() - 清空

特殊-图片储存:
1.创建 canvas
2.drawImage 这张图片
3.toDataURL 把图片转换为dataurl
4.储存在localStorage中

特殊-兼容性 :
1.ios无痕浏览失效;
2.奇葩浏览器有对象没方法;

*本文转自:https://blog.csdn.net/cheogo/article/details/50590401

本地储存 localstorage sessionstorage 的兼容性,API,特点相关推荐

  1. Vue-浏览器本地储存(sessionStorage、localStorage)

    1.存储内容大小一般支持5MB左右(不同浏览器可能还不一样) 2.浏览器端通过WindowsessionStorage和WindowlocalStorage属性来实现本地存储机制.后者会保存网页历史浏 ...

  2. 移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题

    2019独角兽企业重金招聘Python工程师标准>>> 开发H5 webapp时经常需要使用本地存储,如localStorage和sessionStorage存储一些数据,相比最多能 ...

  3. H5页面 用户启动无痕浏览本地储存 localstorage 清楚数据

    移动端开发时,如果用户浏览器启用了无痕浏览,那么本地存储信息就会失效,会导致页面信息报错 解决办法: 先判断是否能适用 localStorage.setItem 如果不行在适用  cookie coo ...

  4. 使用Vue 2.0+本地储存,留言板

    留言板思路 // 把对象添加到数组的最前面  unshift // 数据与表单进行绑定 v-model <!DOCTYPE html> <html><head>&l ...

  5. HTML5 学习笔记(三)——本地存储(LocalStorage、SessionStorage、Web SQL Database)

    一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...

  6. js本地缓存-localStorage、sessionStorage

    1.localStorage 持久化的本地储存,除非主动删除数据,否则数据是永远不会过期的.关闭页面仍然存在此数据 localStorage.setItem('username','zhangsan' ...

  7. 本地存储-cookie|localStorage|sessionStorage|indexedDB

    本地存储 本地存储 cookie 如何工作 问题 cookie标准限制 属性 expires|max-age domain&path secure HttpOnly 设置cookie 服务端设 ...

  8. H5本地储存Web Storage

    一.本地存储由来的背景 由于HTML4时代Cookie的大小.格式.存储数据格式等限制,网站应用如果想在浏览器端存储用户的部分信息,那么只能借助于Cookie.但是Cookie的这些限制,也就导致了C ...

  9. 【Web技术】1295- 总结一下前端本地储存方案

    作者:星尘starx https://juejin.cn/post/6925311938419408904 引言 2022 年,如果你的前端应用,需要在浏览器上保存数据,有三个主流方案: Cookie ...

最新文章

  1. R语言使用pROC包绘制ROC曲线实战:roc函数计算AUC值、plot.roc函数绘制ROC曲线、添加置信区间、为回归模型中的每个因子绘制ROC曲线并在同一个图中显示出来
  2. Asp.net 2.0 中获取控件输出的Html代码 (转)
  3. java异常处理图片_Java处理图片时出现异常
  4. mysql 集群 主从复制
  5. REST风格笔记【简介篇】
  6. 云小课 | 玩转HiLens Studio之手机实时视频流调试代码
  7. Android笔记之权限库AndPermission
  8. 从头开始学做 canvas 动画引擎
  9. CMMI5访谈学习笔记(项目经理角色)(转)
  10. 小学生十大计算机专业书排行,小学教辅十大排行榜2018 小学教辅书那些比较好...
  11. μC/OS源码官网下载链接
  12. word中写出打对号的框
  13. “有意思”的英语单词(5)
  14. 用“大数据”预防职务犯罪
  15. 忘记Excel文件打开密码,怎么办?
  16. android模拟器bo,在 Android 模拟器中安装 busybox
  17. 【Error response from daemon: mkdir /var/lib/docker/overlay2/413d0090b35b07401e25a5cc80538da5b43f6a9】
  18. Linux环境下weblogic的安装与配置
  19. 无线路由器中继设置(增加无线网络信号)
  20. 【网课截图】(自用)Java常量的分类、补充两个快捷键方式(main方法的快捷键psvm、输出语句的快捷键sout)、使用变量注意事项

热门文章

  1. zabbix 电话报警
  2. 工作室课题学习情况总结(第三周)
  3. 2017.11.6与章丘四中互测章丘试题
  4. 简易的Java网络爬虫小案例(二):获取b站视频的详细点赞、收藏和硬币数
  5. 子程序调用与宏定义的异同_微机原理 宏指令及子程序设计实验:宏指令和子程序的区别...
  6. Matplotlib动图保存遇到MovieWriter有问题,自己写gif保存的代码
  7. 手机运行内存6GB和8GB区别在哪里?
  8. linux基本功系列之useradd命令实战
  9. 2016年8月5日 星期五 --出埃及记 Exodus 16:5
  10. c语言编写双人弹跳小球游戏