热门标签 | 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),希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!


推荐阅读
  • Voicewo在线语音识别转换jQuery插件的特点和示例
    本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
  • CSS|网格-行-结束属性原文:https://www.gee ... [详细]
  • css元素可拖动,如何使用CSS禁止元素拖拽?
    一、用户行为三剑客以下3个CSS属性:user-select属性可以设置是否允许用户选择页面中的图文内容;user-modify属性可以设置是否允许输入 ... [详细]
  • 这是原文链接:sendingformdata许多情况下,我们使用表单发送数据到服务器。服务器处理数据并返回响应给用户。这看起来很简单,但是 ... [详细]
  • 禁止程序接收鼠标事件的工具_VNC Viewer for Mac(远程桌面工具)免费版
    VNCViewerforMac是一款运行在Mac平台上的远程桌面工具,vncviewermac版可以帮助您使用Mac的键盘和鼠标来控制远程计算机,操作简 ... [详细]
  • Python瓦片图下载、合并、绘图、标记的代码示例
    本文提供了Python瓦片图下载、合并、绘图、标记的代码示例,包括下载代码、多线程下载、图像处理等功能。通过参考geoserver,使用PIL、cv2、numpy、gdal、osr等库实现了瓦片图的下载、合并、绘图和标记功能。代码示例详细介绍了各个功能的实现方法,供读者参考使用。 ... [详细]
  • 使用正则表达式爬取36Kr网站首页新闻的操作步骤和代码示例
    本文介绍了使用正则表达式来爬取36Kr网站首页所有新闻的操作步骤和代码示例。通过访问网站、查找关键词、编写代码等步骤,可以获取到网站首页的新闻数据。代码示例使用Python编写,并使用正则表达式来提取所需的数据。详细的操作步骤和代码示例可以参考本文内容。 ... [详细]
  • macOS Big Sur全新设计大版本更新,10+个值得关注的新功能
    本文介绍了Apple发布的新一代操作系统macOS Big Sur,该系统采用全新的界面设计,包括图标、应用界面、程序坞和菜单栏等方面的变化。新系统还增加了通知中心、桌面小组件、强化的Safari浏览器以及隐私保护等多项功能。文章指出,macOS Big Sur的设计与iPadOS越来越接近,结合了去年iPadOS对鼠标的完善等功能。 ... [详细]
  • 本文介绍了网页播放视频的三种实现方式,分别是使用html5的video标签、使用flash来播放以及使用object标签。其中,推荐使用html5的video标签来简单播放视频,但有些老的浏览器不支持html5。另外,还可以使用flash来播放视频,需要使用object标签。 ... [详细]
  • 如何压缩网站页面以减少页面加载时间
    本文介绍了影响网站打开时间的两个因素,即网页加载速度和网站页面大小。重点讲解了如何通过压缩网站页面来减少页面加载时间。具体包括图片压缩、Javascript压缩、CSS压缩和HTML压缩等方法,并推荐了相应的压缩工具。此外,还提到了一款Google Chrome插件——网页加载速度分析工具Speed Tracer。 ... [详细]
  • 本文由编程笔记#小编为大家整理,主要介绍了markdown[软件代理设置]相关的知识,希望对你有一定的参考价值。 ... [详细]
  • FIN7后门工具伪装成白帽工具进行传播
    fin7,后门,工具,伪装,成,白, ... [详细]
  • this prototype 闭包 总结
    this对象整理下思路:一般用到this中的情景:1.构造方法中functionA(){this.nameyinshen;}varanewA() ... [详细]
  • JavaWeb介绍概念JavaWeb,是用Java技术来解决相关web互联网领域的技术总和。web包括:web服务器和web客户端两部分。Java在客户端的应用有javaapplet,不过使 ... [详细]
  • 校内无法访问IEEE等部分数据库的解决方案
    解决了校内无法访问IE ... [详细]
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社区 版权所有