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


Posted in Javascript onMay 07, 2019

今天我们从前端的角度了解一下浏览器存储,我们常见且常用的存储方式主要由两种: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、localStorage、sessionStorage)

删除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)

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

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 相关文章推荐
图片自动更新(说明)
Oct 02 Javascript
HTTP状态代码以及定义(解释)
Feb 02 Javascript
javascript 随机展示头像实现代码
Dec 06 Javascript
利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域
Dec 14 Javascript
jQuery简单实现banner图片切换
Jan 02 Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
May 17 Javascript
js利用正则表达式检验输入内容是否为网址
Jul 05 Javascript
Vue实现动态响应数据变化
Apr 28 Javascript
vue.js的手脚架vue-cli项目搭建的步骤
Aug 30 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
Oct 11 Javascript
Vue中使用sass实现换肤功能
Sep 07 Javascript
微信小程序onShareTimeline()实现分享朋友圈
Jan 07 Javascript
JavaScript实现随机点名器实例详解
May 07 #Javascript
vue父组件触发事件改变子组件的值的方法实例详解
May 07 #Javascript
微信小程序:数据存储、传值、取值详解
May 07 #Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
May 07 #Javascript
详解Vue前端生产环境发布配置实战篇
May 07 #Javascript
7个好用的JavaScript技巧分享(译)
May 07 #Javascript
微信小程序实现获取用户信息并存入数据库操作示例
May 07 #Javascript
You might like
windows下zendframework项目环境搭建(通过命令行配置)
2012/12/06 PHP
php页码形式分页函数支持静态化地址及ajax分页
2014/03/28 PHP
Windows下Apache + PHP SESSION丢失的解决过程全纪录
2015/04/07 PHP
Zend Framework基本页面布局分析
2016/03/19 PHP
php使用函数pathinfo()、parse_url()和basename()解析URL
2016/11/25 PHP
jquery实现图片按比例缩放示例
2014/07/01 Javascript
使用FlexiGrid实现Extjs表格效果方法分享
2014/12/16 Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
2015/05/13 Javascript
javascript数组排序汇总
2015/07/07 Javascript
AngularJS入门教程之ng-class 指令用法
2016/08/01 Javascript
微信小程序 两种为对象属性赋值的方式详解
2017/02/23 Javascript
移动端web滚动分页的实现方法
2017/05/05 Javascript
nodejs中art-template模板语法的引入及冲突解决方案
2017/11/07 NodeJs
React中常见的动画实现的几种方式
2018/01/10 Javascript
微信小程序版翻牌小游戏
2018/01/26 Javascript
基于webpack-hot-middleware热加载相关错误的解决方法
2018/02/22 Javascript
通过js示例讲解时间复杂度与空间复杂度
2019/08/06 Javascript
[00:43]FTP典藏礼包 DOTA2三大英雄霸气新套装
2014/03/21 DOTA
[55:03]LGD vs EG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python中将阿拉伯数字转换成中文的实现代码
2011/05/19 Python
Python用threading实现多线程详解
2017/02/03 Python
Python基于正则表达式实现文件内容替换的方法
2017/08/30 Python
Python升级导致yum、pip报错的解决方法
2017/09/06 Python
Django开发中复选框用法示例
2018/03/20 Python
自学python的建议和周期预算
2019/01/30 Python
django drf框架自带的路由及最简化的视图
2019/09/10 Python
如何基于python实现归一化处理
2020/01/20 Python
个人自我鉴定写法
2013/11/30 职场文书
护理实习自我鉴定
2013/12/14 职场文书
我们的节日国庆活动方案
2014/08/19 职场文书
优秀党员自我评价范文
2014/09/15 职场文书
教师查摆问题自查报告
2014/10/11 职场文书
银行给客户的感谢信
2015/01/23 职场文书
不同意离婚上诉状
2015/05/23 职场文书
30岁前绝不能错过的10本书
2019/08/08 职场文书
Netty分布式客户端接入流程初始化源码分析
2022/03/25 Java/Android