常见的浏览器存储方式(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 相关文章推荐
jQuery textarea的长度进行验证
May 06 Javascript
js下写一个事件队列操作函数
Jul 19 Javascript
新手常遇到的一些jquery问题整理
Aug 16 Javascript
js动态为代码着色显示行号
May 29 Javascript
详细分析使用AngularJS编程中提交表单的方式
Jun 19 Javascript
JavaScript对象数组排序实例方法浅析
Jun 15 Javascript
JavaScript实战之带收放动画效果的导航菜单
Aug 16 Javascript
js显示动态时间的方法详解
Aug 20 Javascript
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
webuploader分片上传的实现代码(前后端分离)
Sep 10 Javascript
React精髓!一篇全概括小结(急速)
May 23 Javascript
解决一个微信号同时支持多个环境网页授权问题
Aug 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
一个目录遍历函数
2006/10/09 PHP
利用文件属性结合Session实现在线人数统计
2006/10/09 PHP
用PHP动态生成虚拟现实VRML网页
2006/10/09 PHP
php中通过curl smtp发送邮件
2012/06/05 PHP
浅析echo(),print(),print_r(),return之间的区别
2013/11/27 PHP
使用Huagepage和PGO来提升PHP7的执行性能
2015/11/30 PHP
php处理单文件、多文件上传代码分享
2016/08/24 PHP
奇妙的js
2007/09/24 Javascript
复制本贴标题和地址的js代码
2008/07/01 Javascript
javascript设计简单的秒表计时器
2020/09/05 Javascript
js基于cookie记录来宾姓名的方法
2016/07/19 Javascript
教你如何在Node.js中使用jQuery
2016/08/28 Javascript
JS实现的表头列头固定页面功能示例
2017/01/10 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
2017/05/20 Javascript
解决vue中无法动态修改jqgrid组件 url地址的问题
2018/03/01 Javascript
Vue中图片Src使用变量的方法
2019/10/30 Javascript
Vue-cli3生成的Vue项目加载Mxgraph方法示例
2020/05/31 Javascript
python中的格式化输出用法总结
2016/07/28 Python
Linux下多个Python版本安装教程
2018/08/15 Python
在Pycharm中调试Django项目程序的操作方法
2019/07/17 Python
Python多线程模块Threading用法示例小结
2019/11/09 Python
Python语法之精妙的十个知识点(装B语法)
2020/01/18 Python
python简单实现最大似然估计&amp;scipy库的使用详解
2020/04/15 Python
Python Selenium库的基本使用教程
2021/01/04 Python
Python爬虫实现selenium处理iframe作用域问题
2021/01/27 Python
html5中valid、invalid、required的定义
2014/02/21 HTML / CSS
美国最佳选择产品网站:Best Choice Products
2019/05/27 全球购物
N:Philanthropy官网:美国洛杉矶基础款服装
2020/06/09 全球购物
《鲁班和橹板》教学反思
2014/04/27 职场文书
助人为乐道德模范事迹材料
2014/08/16 职场文书
党的群众路线教育实践活动整改落实情况自查报告
2014/10/28 职场文书
幼儿园教师考核评语
2014/12/31 职场文书
事业单位年度考核评语
2014/12/31 职场文书
护士岗前培训心得体会
2016/01/08 职场文书
用JS实现飞机大战小游戏
2021/06/09 Javascript
使用redis实现延迟通知功能(Redis过期键通知)
2021/09/04 Redis