JavaScript----浏览器存储

cookie

  • cookie是客户端的会话跟踪技术(服务端为session)
  • 作用: 将数据存储在浏览器中
  • 生命周期:
    • 默认是一次会话(浏览器关闭)
    • 如果通过expires=设置了过期时间, 并且过期时间没有过期, 那么下次打开浏览器还是存在
    • 如果通过expires=设置了过期时间, 并且过期时间已经过期了,那么会立即删除保存的数据
  • 注意点:
    • cookie不能一次性存储多条数据,要想保存数据,必须一条一条的设置
    • cookie默认不会保存任何的数据
    • cookie有大小和数量的限制:
      • 数量: 20~40个
      • 个数: 4KB左右
  • cookie的作用范围:
    • 在同一浏览器下,如果在当前浏览器中保存了数据,那么它的下一级路径下的浏览器也可以访问
    • 在同一个浏览器下,如果在当前浏览器保存了数据,如果想要上级访问,需要在path属性上添加/
  • 作用范围的注意点:
    • 跨域的浏览器不能访问同一个cookie,需要访问则需要加一个domain的属性,值为域名
  • cookie的保存格式
var date = new Date();
date.setDate(date.getDate() + 1);

document.cookie("name = xxz;path=/;domain=baidu.com;expires = "+date.toGMTString()+";",

hash

  • hash也是一种储存浏览器数据的方式
  • 特点: 浏览器url后面会加上#和hash保存的数据
  • 存储格式: window.location.hash = 值;

H5提供的新的存储方案

  • 以下新增方案都具备以下特点,可以弥补cookie和hash的不足
  • 特点:
    • 设置、读取方便、页面刷新不丢失数据
    • 容量较大,sessionStorage约5M、localStorage约20M
    • 只能存储字符串,可以将对象JSON.stringify() 编码后存储

window.sessionStorage

  • 容量约为5M
  • 生命周期为关闭浏览器窗口
  • 在同一个窗口(页面)下数据可以共享
  • 格式:
    • window.sessionStorage.setItem('name', 'lnj');
  • 获取用getItem,删除用removeItem,删除所有用clear

window.localStorage

  • 除了特点有所不同,其余和sessionStorage完全相同
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  •   支持离线 Web 应用开发是 HTML5 的另一个重点。   所谓离线 Web 应用,就是在设备不能上网的情况...
    霜天晓阅读 1,092评论 0 2
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,758评论 1 45
  • 1. 缓存分类 服务器端缓存(CDN缓存); 客户端缓存(浏览器缓存); 2. 浏览器缓存 2.1. 强缓存 浏览...
    puxiaotaoc阅读 5,672评论 3 208
  • 1.一些开放性题目 1.自我介绍:除了基本个人信息以外,面试官更想听的是你与众不同的地方和你的优势。 2.项目介绍...
    55lover阅读 657评论 0 6
  • 2017.6.14 星期三 天气晴 因为快要考试了,最近儿子的作业都是做卷子多,每天晚上做完作业让他爸...
    小小邓妈咪阅读 198评论 0 2