热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

常见的浏览器存储方式(cookie、localStorage、sessionStorage)

今天我们从前端的角度了解一下浏览器存储,我们常见且常用的存储方式主要由两种:cookie、webStorage(localStorage和sessionStorage)。本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友参考下吧

今天我们从前端的角度了解一下浏览器存储,我们常见且常用的存储方式主要由两种:COOKIE、webStorage(localStorage和sessionStorage)。下面我们来一一认识它们。

COOKIE基于HTTP规范,用来识别用户。

COOKIE是服务器发送到浏览器的一小段数据,会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。

COOKIE诞生之初的作用就是解决HTTP的无状态请求,用来记录一些用户相关的一些状态。

•会话状态管理(如用户登录状态、购物车、游戏分数或其它需要记录的信息)
•个性化设置(如用户自定义设置、主题等)
•浏览器行为跟踪(如跟踪分析用户行为等)

因为一些前端交互的需要,后来COOKIE也被用于存储一些客户端的数据。

COOKIE的原生api不友好,需要自行封装一下。下面是封装后的方法。

创建COOKIE

/**
* @description js原生设置COOKIE
* @param {String} name 给你要设置的COOKIE起个名字(key)
* @param {String} value COOKIE的具体内容(value)
* @param {String} expiredays 设置COOKIE的过期时间,单位:天
*/
function setCOOKIE(name, value, expiredays) {
var exdate=new Date();
exdate.setDate(exdate.getDate() + expiredays);
document.COOKIE = name + '=' + escape(value)+ ((expiredays == null) ? '' : ';expires=' +exdate.toGMTString());
}

获取COOKIE

/**
* @description js原生获取COOKIE方法1
* @param {String} name 你要获取的COOKIE名
*/
function getCOOKIE(name) {
  if (document.COOKIE.length > 0) {
    var start = document.COOKIE.indexOf(name + '=');
    if (start !== -1) {
      start = start + name.length + 1;
      var end = document.COOKIE.indexOf(';', start);
      if (end === -1) {
        end = document.COOKIE.length;
        return unescape(document.COOKIE.substring(start, end));
      }
   }
  }
  return '';
}

/**
* @description js原生获取COOKIE方法2
* @param {String} name 你要获取的COOKIE名
*/
function getCOOKIE(name) {
  var COOKIEArr = document.COOKIE.split(';') || [];
  if(!COOKIEArr.length){
    return '';
  }
  for(var i = 0; i 

检查COOKIE是否已存在

function checkCOOKIE() {
  username = getCOOKIE('username');
  if (username !== null && username !== '') {
    alert('Welcome again ' + username + '!');
  } else {
    username = prompt('Please enter your name:', '');
    if (username !== null && username !== '') {
      setCOOKIE('username',username,365);
    }
  }
}

jquery.COOKIE.js封装的COOKIE设置方法:

创建COOKIE

/**
* 'name', COOKIE命名
* 'value',COOKIE的值
* {
*   expires: 7, // COOKIE有效期,单位天;默认值:会话COOKIE,关闭浏览器COOKIE失效。
*   path: '/', // COOKIE影响到的路径;值为'/',表示设置COOKIE在整个域中可用;默认值:创建COOKIE的页面路径。
*   domain: 'example.com', // 定义COOKIE有效的域。默认值:创建COOKIE的页面域。
*   secure: false, // 定义COOKIE安全性,默认值:false,设置为true,则COOKIE在http中是无效的,COOKIE的传输需要使用安全协议(https)。
* }
*/
$.COOKIE('name', 'value', { expires: 7, path: '/', domain: 'example.com', secure: false});

读取COOKIE

$.COOKIE('name'); //name存在返回对应value,不存在返回null

读取所有可用的COOKIEs:

$.COOKIE(); //{'name': value}

TODO:直接调用会报错?

删除COOKIE

//成功删除COOKIE时返回true,否则返回false
$.removeCOOKIE('name'); // => true
$.removeCOOKIE('nothing'); // => false

注意:删除COOKIE时,必须传递用于设置COOKIE的完全相同的路径,域和安全选项,除非您依赖于默认选项。

即:设置COOKIE时如果设置了path属性或secure属性,删除的时候要带着这些属性,否则无法成功删除COOKIE。

// This won't work!
$.removeCOOKIE('name'); // => false
// This will work!
$.removeCOOKIE('name', { path: '/' }); // => true
TODO:$.removeCOOKIE无效?

(jquery1.9.1.js + jquery.COOKIE.js,插件无重复引用的情况,$.removeCOOKIE提示undefined)

webStorage基于HTML5规范

HTML5 提供了两种在客户端存储数据的新方法:localStorage和sessionStorage,挂载在window对象下。

webStorage是本地存储,数据不是由服务器请求传递的。从而它可以存储大量的数据,而不影响网站的性能。

Web Storage的目的是为了克服由COOKIE带来的一些限制,当数据需要被严格控制在客户端上时,无须持续地将数据发回服务器。比如客户端需要保存的一些用户行为或数据,或从接口获取的一些短期内不会更新的数据,我们就可以利用Web Storage来存储。

localStorage的生命周期是永久性的。localStorage存储的数据,即使关闭浏览器,也不会让数据消失,除非主动的去删除数据。如果 想设置失效时间,需自行封装。

sessionStorage 的生命周期是在浏览器关闭前。

  特性:

•关闭浏览器sessionStorage 失效;
•页面刷新不会消除数据;
•只有在当前页面打开的链接,才可以访sessionStorage的数据,使用window.open打开页面和改变localtion.href方式都可以获 取到

sessionStorage内部的数据;

存储方式

作用与特性

存储数量及大小

api

COOKIE

● 存储用户信息,获取数据需要与服务器建立连接。

● 可存储的数据有限,且依赖于服务器,无需请求服务器的数据尽量不要存放在COOKIE中,以免影响页面性能。

● 可设置过期时间。

● 最好将COOKIE控制在4095B以内,超出的数据会被忽略。

● IE6或更低版本最多存20个COOKIE; IE7及以上版本最多可以有50个;Firefox最多50个;chrome和Safari没有做硬性限制。

原生、$.COOKIE(详见上文)

localStorage

● 存储客户端信息,无需请求服务器。

● 数据永久保存,除非用户手动清理客户端缓存。

● 开发者可自行封装一个方法,设置失效时间。

 

5M左右,各浏览器的存储空间有差异。(感兴趣的同学可以自己试一下)。

// 保存数据到 localStorage

localStorage.setItem('key', 'value');

// 从 localStorage 获取数据

let data = localStorage.getItem('key');

// 从 localStorage 删除保存的数据

localStorage.removeItem('key');

// 从 localStorage 删除所有保存的数据

localStorage.clear();

sessionStorage

● 存储客户端信息,无需请求服务器。

● 数据保存在当前会话,刷新页面数据不会被清除,结束会话(关闭浏览器、关闭页面、跳转页面)数据失效。

 

同localStorage

// 保存数据到 sessionStorage

sessionStorage.setItem('key', 'value');

// 从 sessionStorage 获取数据

let data = sessionStorage.getItem('key');

// 从 sessionStorage 删除保存的数据

sessionStorage.removeItem('key');

// 从 sessionStorage 删除所有保存的数据

sessionStorage.clear();

总结:

以上所述是小编给大家介绍的常见的浏览器存储方式(COOKIE、localStorage、sessionStorage),希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!


推荐阅读
  • 技术分享:从动态网站提取站点密钥的解决方案
    本文探讨了如何从动态网站中提取站点密钥,特别是针对验证码(reCAPTCHA)的处理方法。通过结合Selenium和requests库,提供了详细的代码示例和优化建议。 ... [详细]
  • 在现代Web应用中,当用户滚动到页面底部时,自动加载更多内容的功能变得越来越普遍。这种无刷新加载技术不仅提升了用户体验,还优化了页面性能。本文将探讨如何实现这一功能,并介绍一些实际应用案例。 ... [详细]
  • 本文详细介绍了IBM DB2数据库在大型应用系统中的应用,强调其卓越的可扩展性和多环境支持能力。文章深入分析了DB2在数据利用性、完整性、安全性和恢复性方面的优势,并提供了优化建议以提升其在不同规模应用程序中的表现。 ... [详细]
  • Docker的安全基准
    nsitionalENhttp:www.w3.orgTRxhtml1DTDxhtml1-transitional.dtd ... [详细]
  • 本文总结了汇编语言中第五至第八章的关键知识点,涵盖间接寻址、指令格式、安全编程空间、逻辑运算指令及数据重复定义等内容。通过详细解析这些内容,帮助读者更好地理解和应用汇编语言的高级特性。 ... [详细]
  • 1:有如下一段程序:packagea.b.c;publicclassTest{privatestaticinti0;publicintgetNext(){return ... [详细]
  • DNN Community 和 Professional 版本的主要差异
    本文详细解析了 DotNetNuke (DNN) 的两种主要版本:Community 和 Professional。通过对比两者的功能和附加组件,帮助用户选择最适合其需求的版本。 ... [详细]
  • 尽管某些细分市场如WAN优化表现不佳,但全球运营商路由器和交换机市场持续增长。根据最新研究,该市场预计在2023年达到202亿美元的规模。 ... [详细]
  • 使用Vultr云服务器和Namesilo域名搭建个人网站
    本文详细介绍了如何通过Vultr云服务器和Namesilo域名搭建一个功能齐全的个人网站,包括购买、配置服务器以及绑定域名的具体步骤。文章还提供了详细的命令行操作指南,帮助读者顺利完成建站过程。 ... [详细]
  • 在现代网络环境中,两台计算机之间的文件传输需求日益增长。传统的FTP和SSH方式虽然有效,但其配置复杂、步骤繁琐,难以满足快速且安全的传输需求。本文将介绍一种基于Go语言开发的新一代文件传输工具——Croc,它不仅简化了操作流程,还提供了强大的加密和跨平台支持。 ... [详细]
  • 本文详细介绍了如何使用jQuery防止事件冒泡,确保子元素的点击事件不会触发父元素或祖先元素的相应事件。通过具体的代码示例和解释,帮助开发者更好地理解和应用这一技术。 ... [详细]
  • FineUI 是一款基于 jQuery 的专业级控件库,专为 ASP.NET WebForms 和 MVC 开发设计。它提供了丰富的用户界面组件,简化了复杂 Web 应用程序的开发过程。 ... [详细]
  • 本文介绍了多个关于JavaScript的书籍资源、实用工具和编程实例,涵盖从入门到进阶的各个阶段,帮助读者全面提升JavaScript编程能力。 ... [详细]
  • 本文介绍了一段使用jQuery实现的用户注册页面表单验证代码,适用于前端开发人员学习和参考。该示例结合了HTML、CSS和JavaScript,确保用户输入的数据格式正确。 ... [详细]
  • 基于JQuery实现的评分插件
    本文介绍了一个使用JQuery创建的交互式评分控件。当用户将鼠标悬停在星星上时,左侧的星星会变为实心,右侧保持空心,并显示对应的评分等级;移开鼠标后,所有星星恢复为空心状态。 ... [详细]
author-avatar
穿着拖鞋的中年男子
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有