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


Posted in jQuery onOctober 20, 2017

前言:cookie,localStorage和sessionStorage都是浏览器本地存储数据的地方,其用法不尽相同;总结一下基本的用法。

一、cookie

定义:

存储在本地,容量最大4k,在同源的http请求时携带传递,损耗带宽;

可设置访问路径,只有此路径及此路径的子路径才能访问此cookie,存在有效的时间。

注意点:

cookie的访问需要服务器环境,直接在本地文件访问无效;

cookie的访问和设置需要导入jquery.cookie.js文件;

浏览器对每一个访问的地址下可添加的cookie是有限制的;同时每个浏览器可添加的cookie个数也存在限制。

作用:

储存用户的痕迹信息,如用户名,ID号,密码等,是服务器脚本发送给浏览器的加密数据,便于下次访问时用户可以直接登录等;

运用代码

//访问cookie,mycolor代表键
var $cook = $.cookie("mycolor");
//设置cookie
$.cookie("mycolor", "red"});
$.cookie("mycolor", "red", { expires: 7, path: '/' });//增加了有效时间和访问路径
//删除cookie,传递null值
$.cookie("mycolor", null});

说明:

'mycolor'参数相当于cookie存储数据的键,即数据的名字,通过名字访问;

cookie的设置有三个参数,第一为设置数据的键,第二个为设置数据的值,expires表示有效时间,单位为天,path为访问路径,"/"表示当前文件路径,在网站中表示根目录。

注意:如果不设置路径,默认情况下只有设置cookie的网页才可以访问此cookie;如果想网站的网页可以共享cookie,将路径设为根目录。

注意:cookie就相当于一个能存储数据的微型本地数据库,"mycolor"相当于每条数据的key。

二、localStorage

定义:一个本地的小型数据文件

存储在本地,容量为5M或者更大,不会在请求时候携带传递;

数据在所有同源窗口中共享,一直有效,除非人为删除,可作为长期数据。

注意点:

localStorage数据不需要依赖服务器环境访问,可以直接在本地文件访问;

不需要额外的文件支持。

同源窗口指的是同一个域名下或者是index.html所在的文件夹下的文件路径。

代码运用

//设置:
localStorage.setItem("mycolor", "456");
localStorage.mycolor= '456';
//获取:
var $color = localStorage.getItem("mycolor");
var $color = localStorage.mycolor
var $color = localStorage.key(0);//获取第一个键,按角标获取
var $color = localStorage.key("");//获取最后一个键
var $length = localStorage.length;//获取数据的长度
//删除
localStorage.removeItem("mycolor");
//清空
localStorage.clear();//将所有保存的数据删除

说明:

设置数据格式类似键值对,"mycolor"代表key,"456"代表值。

数据是有排序的,后加入的角标靠前,最后加入的角标为0.

注意:localStorage相当于将数据保存在磁盘,是永久的,但是其针对的是固定的域名下的文件,打开其他的域名下的网页,localStorage不会显示。

三、sessionStorage

定义:一个本地的小型数据库

存储在本地,容量为5M或者更大;

不会在请求时候携带传递,在同源的当前窗口关闭前有效。

注意点:

sessionStorage同样不需要再服务器的环境下运行;

不需要额外的文件支持;

sessionStorage数据设置后即使页面进行重载也不会清除;但当该窗口关闭后,里面的数据就会清除,再打开没有数据。相当于将数据保存在内存中。

代码运用

//设置:
sessionStorage.setItem("mycolor", "456");
sessionStorage.mycolor= '456';
//获取:
var $color = sessionStorage.getItem("mycolor");
var $color = sessionStorage.mycolor
var $color = sessionStorage.key(0);//获取第一个键,按角标获取
var $color = sessionStorage.key("");//获取最后一个键
var $length = sessionStorage.length;//获取数据的长度
//删除
sessionStorage.removeItem("mycolor");
//清空
sessionStorage.clear();//将所有保存的数据删除

说明:

sessionStorage的使用方法和localStorage一样。

数据是有排序的,后加入的角标靠前,最后加入的角标为0.

总结

以上所述是小编给大家介绍的jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jquery与js实现全选功能的区别
Jun 11 jQuery
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 jQuery
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
jQuery实现右侧抽屉式在线客服功能
Dec 25 jQuery
jquery实现企业定位式导航效果
Jan 01 jQuery
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
基于jQuery实现无缝轮播与左右点击效果
May 13 jQuery
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 jQuery
jQuery中DOM常见操作实例小结
Aug 01 jQuery
基于jQuery实现可编辑的表格
Dec 11 jQuery
jQuery实现简易聊天框
Feb 08 jQuery
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 #jQuery
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 #jQuery
jquery实现图片跟随鼠标的实例
Oct 17 #jQuery
jquery一键控制checkbox全选、反选或全不选
Oct 16 #jQuery
jQuery实现简单的回到顶部totop功能示例
Oct 16 #jQuery
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 #jQuery
jQuery实现的页面遮罩层功能示例【测试可用】
Oct 14 #jQuery
You might like
利用文件属性结合Session实现在线人数统计
2006/10/09 PHP
php中判断字符串是否全是中文或含有中文的实现代码
2011/09/16 PHP
PHP读取xml方法介绍
2013/01/12 PHP
深入探究PHP的多进程编程方法
2015/08/18 PHP
php获取ajax的headers方法与内容实例
2017/12/27 PHP
php图片裁剪函数
2018/10/31 PHP
关于PHP中interface的用处详解
2020/07/26 PHP
C#中TrimStart,TrimEnd,Trim在javascript上的实现
2011/01/17 Javascript
jQuery获取样式中的背景颜色属性值/颜色值
2012/12/17 Javascript
javaScript函数中执行C#代码中的函数方法总结
2013/08/07 Javascript
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
2014/05/08 Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
2016/06/17 Javascript
JS实现运动缓冲效果的封装函数示例
2018/02/18 Javascript
详解plotly.js 绘图库入门使用教程
2018/02/23 Javascript
浅谈vue-cli 3.0.x 初体验
2018/04/11 Javascript
JavaScript强制类型转换和隐式类型转换操作示例
2019/05/01 Javascript
[01:32]TI珍贵瞬间系列(一)
2020/08/26 DOTA
Python脚本实现集群检测和管理功能
2015/03/06 Python
Python实现八大排序算法
2016/08/13 Python
python 数据清洗之数据合并、转换、过滤、排序
2017/02/12 Python
python和ruby,我选谁?
2017/09/13 Python
Python将多个excel文件合并为一个文件
2018/01/03 Python
对python中的logger模块全面讲解
2018/04/28 Python
Python2.7 实现引入自己写的类方法
2018/04/29 Python
python求质数的3种方法
2018/09/28 Python
flask-restful使用总结
2018/12/04 Python
python set内置函数的具体使用
2019/07/02 Python
Django框架之DRF 基于mixins来封装的视图详解
2019/07/23 Python
Jar包的作用是什么
2014/03/30 面试题
TCP/IP中的TCP和IP分别承担什么责任
2012/04/21 面试题
实习老师个人总结的自我评价
2013/09/28 职场文书
物理系毕业生自荐信
2013/11/01 职场文书
历史教育专业个人求职信
2013/12/13 职场文书
煤矿机修工岗位职责
2014/02/07 职场文书
单位消防安全责任书
2014/07/23 职场文书
货款欠条范本
2015/07/03 职场文书