常见的浏览器存储方式(cookie、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 < cookieArr.length; i ++){
    var key = $.trim(cookieArr[i]).split('=')[0];
    var value = $.trim(cookieArr[i]).split('=')[1];
    if(key === name){
      return value;
    }
  }
}

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

(0)

相关推荐

  • js浏览器本地存储store.js介绍及应用

    store.js - 轻松实现本地存储(LocalStorage) store.js 是一个兼容所有浏览器的 LocalStorage 包装器,不需要借助 Cookie 或者 Flash.store.js 会根据浏览器自动选择使用 localStorage.globalStorage 或者 userData 来实现本地存储功能. store.js 提供非常简洁的 API 来实现跨浏览器的本地存储功能: 复制代码 代码如下: store.set('username', 'marcus') stor

  • 浏览器中url存储的JavaScript实现

    现在的浏览器里,有一个十分有趣的功能,你可以在不刷新页面的情况下修改浏览器URL;在浏览过程中.你可以将浏览历史储存起来,当你在浏览器点击后退按钮的时候,你可以冲浏览历史上获得回退的信息,这听起来并不复杂,是可以实现的,我们来编写些代码.来看看它是如何工作的. var stateObject = {}; var title = "Wow Title"; var newUrl = "/my/awesome/url"; history.pushState(stateOb

  • vue之浏览器存储方法封装实例

    如下所示: export function isObject (val) { return val !== null && typeof val === 'object' } export function setStore (key, val, type = 'localStorage') { if (isObject(val)) window[type].setItem(key, JSON.stringify(val)) else window[type].setItem(key, v

  • jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法

    前言:cookie,localStorage和sessionStorage都是浏览器本地存储数据的地方,其用法不尽相同:总结一下基本的用法. 一.cookie 定义: 存储在本地,容量最大4k,在同源的http请求时携带传递,损耗带宽: 可设置访问路径,只有此路径及此路径的子路径才能访问此cookie,存在有效的时间. 注意点: cookie的访问需要服务器环境,直接在本地文件访问无效: cookie的访问和设置需要导入jquery.cookie.js文件: 浏览器对每一个访问的地址下可添加的c

  • web基于浏览器的本地存储方法应用

    在客户端存储数据时,我们一般都用cookie(不敏感数据),但是在客户端越来越富的今天,cookie可存储的量(每个域最大4k)实在是小. 在HTML5中有localStorage可使用,但是这就抛弃了IE8-.为了兼容,我们可以翻出IE很久以前就搞的一个存储方法: 给一个元素添加一个特殊的样式url(#default#userData),之后就可以通过setAttribute和getAttribute来存取键值对形式的数据了. 要注意的一点就是在数据改变后要使用save方法,而数据加载初期要l

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

    今天我们从前端的角度了解一下浏览器存储,我们常见且常用的存储方式主要由两种:cookie.webStorage(localStorage和sessionStorage).下面我们来一一认识它们. Cookie基于HTTP规范,用来识别用户. Cookie是服务器发送到浏览器的一小段数据,会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上. Cookie诞生之初的作用就是解决HTTP的无状态请求,用来记录一些用户相关的一些状态. •会话状态管理(如用户登录状态.购物车.游戏分数或其它需要

  • ahooks封装cookie localStorage sessionStorage方法

    目录 引言 cookie localStorage/sessionStorage 总结与归纳 引言 本文是深入浅出 ahooks 源码系列文章的第九篇,这个系列的目标主要有以下几点: 加深对 React hooks 的理解. 学习如何抽象自定义 hooks.构建属于自己的 React hooks 工具库. 培养阅读学习源码的习惯,工具库是一个对源码阅读不错的选择. 今天来看看 ahooks 是怎么封装 cookie/localStorage/sessionStorage 的. cookie ah

  • JavaScript中localStorage对象存储方式实例分析

    本文实例讲述了JavaScript中localStorage对象存储方式.分享给大家供大家参考,具体如下: [Local storage limitations]文章中提及JavaScript里的local storge的限制,例子中在localStorage里存储了一个bool型的数据,但是却没有像我们期待的一样进行存储. 当我们存储布尔型,数值型,字符串型时,localStorage对象会将我们存储的数据默认转为字符串字面量. localStorage[0] = false;// "fals

  • Vue保持用户登录状态(各种token存储方式)

    目录 怎么设置Cookie Cookie的缺点: LocalStorage与SessionStorage存储Token LocalStorage与SessionStorage的主要区别: Vuex存储Token 为什么要使用Vuex 在前端中,实现保持用户登录状态的方法有很多种,你通过可以存Cookie.Session.Token等信息来保持,不管后台向前端发送哪个我们要做的就是将这些信息存在在本地浏览器中,浏览器再次发送请求时,将设置了'键'='值'的Cookie再次抛给服务器,服务器通过Co

  • 5个HTML5的常用本地存储方式详解与介绍

    在 HTML5 规范之前,存储主要是用 cookies .但cookies也有缺点: 在请求头上带着数据: 大小是 4k 之内: 主 Domain 污染: cookies 的主要应用:购物车.客户登录. 由于存在这么多缺点,因此我们需要解决以下问题: 解决 4k 的大小问题: 解决请求头常带存储信息的问题: 解决关系型存储的问题: 跨浏览器: HTML5的5种存储方式 1. 本地存储 localstorage 存储方式: 以键值对( Key-Value)的方式存储,永久存储,永不失效,除非手动删

  • JS 中Json字符串+Cookie+localstorage

    目录 1.Json字符串 1.1Json语法 1.2举例 2.Cookie 2.1怎么用? 3.Localstorage 3.1基本使用 3.2案例(记住用户名和密码) 1.Json字符串 Json主要用于前后端交互,是一种数据格式,相较于Xml,使用起来更加便捷 1.1Json语法 可以用来表示:对象.数组.简单数据类型等 {}表示对象 ,[]表示数组 键与值之间用 :隔开,键与键之间用,隔开,属性名必须使用""号 值尽量不要用NaN,属性的最后一位如果没有其他属性,不要留, Jso

  • JS 中Json字符串+Cookie+localstorage

    目录 1.Json字符串 1.1Json语法 1.2举例 2.Cookie 2.1怎么用? 3.Localstorage 3.1基本使用 3.2案例(记住用户名和密码) 1.Json字符串 Json主要用于前后端交互,是一种数据格式,相较于Xml,使用起来更加便捷 1.1Json语法 可以用来表示:对象.数组.简单数据类型等 {}表示对象 ,[]表示数组 键与值之间用 :隔开,键与键之间用,隔开,属性名必须使用""号 值尽量不要用NaN,属性的最后一位如果没有其他属性,不要留, Jso

  • session的存储方式和配置方法介绍

    1.Session的存储方式. session其实分为客户端Session和服务器端Session. 当用户首次与Web服务器建立连接的时候,服务器会给用户分发一个 SessionID作为标识.SessionID是一个由24个字符组成的随机字符串.用户每次提交页面,浏览器都会把这个SessionID包含在 HTTP头中提交给Web服务器,这样Web服务器就能区分当前请求页面的是哪一个客户端.这个SessionID就是保存在客户端的,属于客户端Session. 其实客户端Session默认是以co

  • 常见的浏览器Hack技巧整理

    常见的浏览器Hack技巧整理 如果你经常需要做前端页面,那么你一定多多少少需要解决页面的浏览器兼容问题.而浏览器兼容问题大部分也集中在对IE系列的兼容.这里就总结一下对IE系列的CSS Hack,记录一下,方便以后查阅. IE Hack IE系列浏览器的hack大略如下: _nowamagic:1px;-----------ie6 *nowamagic:1px;-----------ie7 nowamagic:1px\0;----------ie89 nowamagic:1px\9\0;----

随机推荐