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中的deferred对象和extend方法详解
May 08 jQuery
jQuery简单绑定单个事件的方法示例
Jun 10 jQuery
关于jquery form表单序列化的注意事项详解
Aug 01 jQuery
jQuery实现手势解锁密码特效
Aug 14 jQuery
基于jquery的on和click的区别详解
Jan 15 jQuery
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
jQuery实现表单动态添加与删除数据操作示例
Jul 03 jQuery
jQuery实现的自定义轮播图功能详解
Dec 28 jQuery
jQuery分组选择器简单用法示例
Apr 04 jQuery
jQuery 筛选器简单操作示例
Oct 02 jQuery
jquery将信息遍历到界面上实例代码
Jan 21 jQuery
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 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
php学习笔记之 函数声明
2011/06/09 PHP
PHP中运用jQuery的Ajax跨域调用实现代码
2012/02/21 PHP
PHP上传文件参考配置大文件上传
2015/12/16 PHP
PHP使用socket发送HTTP请求的方法
2016/02/14 PHP
php通过curl添加cookie伪造登陆抓取数据的方法
2016/04/02 PHP
php断点续传之文件分割合并详解
2016/12/13 PHP
基于jQuery的消息提示插件之旅 DivAlert(三)
2010/04/01 Javascript
js实现从中间开始往上下展开网页窗口的方法
2015/03/02 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
2015/04/12 Javascript
jquery中map函数遍历数组用法实例
2015/05/18 Javascript
Jquery日期选择datepicker插件用法实例分析
2015/06/08 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
2015/06/29 Javascript
Bootstrap表单制作代码
2017/03/17 Javascript
JavaScript之filter_动力节点Java学院整理
2017/06/28 Javascript
微信小程序滚动Tab实现左右可滑动切换
2017/08/17 Javascript
vue.js input框之间赋值方法
2018/08/24 Javascript
vue实现移动端图片上传功能
2019/12/23 Javascript
vue 使用lodash实现对象数组深拷贝操作
2020/09/10 Javascript
Python tornado队列示例-一个并发web爬虫代码分享
2018/01/09 Python
pandas计算最大连续间隔的方法
2019/07/04 Python
Django 多表关联 存储 使用方法详解 ManyToManyField save
2019/08/09 Python
对tensorflow 中tile函数的使用详解
2020/02/07 Python
Python json模块与jsonpath模块区别详解
2020/03/05 Python
python将unicode和str互相转化的实现
2020/05/11 Python
Python3批量创建Crowd用户并分配组
2020/05/20 Python
AmazeUI图片轮播效果的示例代码
2020/08/20 HTML / CSS
美国最大网上鞋店:Zappos
2016/07/25 全球购物
Tod’s英国官方网站:意大利奢华手工制作手袋和鞋履
2019/03/15 全球购物
介绍一下Python中webbrowser的用法
2013/05/07 面试题
教师演讲稿范文
2014/01/08 职场文书
活动总结的格式
2014/05/07 职场文书
上海世博会志愿者口号
2014/06/17 职场文书
国际贸易实训报告
2014/11/05 职场文书
公司行政主管岗位职责
2015/04/09 职场文书
晶体管单管来复再生式收音机
2021/04/22 无线电
古见同学有交流障碍症 第二季宣传CM公开播出
2022/04/11 日漫