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


推荐阅读
  • JavaScript 跨域解决方案详解
    本文详细介绍了JavaScript在不同域之间进行数据传输或通信的技术,包括使用JSONP、修改document.domain、利用window.name以及HTML5的postMessage方法等跨域解决方案。 ... [详细]
  • 理解浏览器历史记录(2)hashchange、pushState
    阅读目录1.hashchange2.pushState本文也是一篇基础文章。继上文之后,本打算去研究pushState,偶然在一些信息中发现了锚点变 ... [详细]
  • 搭建个人博客:WordPress安装详解
    计划建立个人博客来分享生活与工作的见解和经验,选择WordPress是因为它专为博客设计,功能强大且易于使用。 ... [详细]
  • 本文详细探讨了在Java TCP编程中,如何理解和测量并发连接数、请求数及并发用户数,并提供了实际应用中的测试方法和优化建议。 ... [详细]
  • H5技术实现经典游戏《贪吃蛇》
    本文将分享一个使用HTML5技术实现的经典小游戏——《贪吃蛇》。通过H5技术,我们将探讨如何构建这款游戏的两种主要玩法:积分闯关和无尽模式。 ... [详细]
  • 本文探讨了如何通过优化 DOM 操作来提升 JavaScript 的性能,包括使用 `createElement` 函数、动画元素、理解重绘事件及处理鼠标滚动事件等关键主题。 ... [详细]
  • JavaScript 实现图片文件转Base64编码的方法
    本文详细介绍了如何使用JavaScript将用户通过文件输入控件选择的图片文件转换为Base64编码字符串,适用于Web前端开发中图片上传前的预处理。 ... [详细]
  • 汇总了2023年7月7日最新的网络安全新闻和技术更新,包括最新的漏洞披露、工具发布及安全事件。 ... [详细]
  • Canopy环境安装与使用指南
    《利用Python进行数据分析》一书推荐使用EPDFree版本的环境,然而随着技术的发展,目前更多人倾向于使用Canopy。本文将详细介绍Canopy的安装及使用方法。 ... [详细]
  • 笔记说明重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系& ... [详细]
  • 本文探讨了互联网服务提供商(ISP)如何可能篡改或插入用户请求的数据流,并提供了有效的技术手段来防止此类劫持行为,确保网络环境的安全与纯净。 ... [详细]
  • 随着Linux操作系统的广泛使用,确保用户账户及系统安全变得尤为重要。用户密码的复杂性直接关系到系统的整体安全性。本文将详细介绍如何在CentOS服务器上自定义密码规则,以增强系统的安全性。 ... [详细]
  • 本文详细介绍如何安装和配置DedeCMS的移动端站点,包括新版本安装、老版本升级、模板适配以及必要的代码修改,以确保移动站点的正常运行。 ... [详细]
  • 吴石访谈:腾讯安全科恩实验室如何引领物联网安全研究
    腾讯安全科恩实验室曾两次成功破解特斯拉自动驾驶系统,并远程控制汽车,展示了其在汽车安全领域的强大实力。近日,该实验室负责人吴石接受了InfoQ的专访,详细介绍了团队未来的重点方向——物联网安全。 ... [详细]
  • Docker安全策略与管理
    本文探讨了Docker的安全挑战、核心安全特性及其管理策略,旨在帮助读者深入理解Docker安全机制,并提供实用的安全管理建议。 ... [详细]
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社区 版权所有