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实现文字打印动态效果
Apr 21 jQuery
jquery Form轻松实现文件上传
May 24 jQuery
jQuery validata插件实现方法
Jun 25 jQuery
jquery.validate.js 多个相同name的处理方式
Jul 10 jQuery
jQuery实现节点的追加、替换、删除、复制功能示例
Jul 11 jQuery
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
jQuery实现的回车触发按钮事件功能示例
Mar 25 jQuery
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
jquery操作select常见方法大全【7种情况】
May 28 jQuery
jQuery实现图片下载代码
Jul 18 jQuery
jQuery表单选择器用法详解
Aug 22 jQuery
JQuery获得内容和属性方法解析
May 30 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
无线电广播与收音机发展的历史回眸
2021/03/02 无线电
压力如何影响浓缩咖啡品质
2021/03/03 咖啡文化
PHP 获取MSN好友列表的代码(2009-05-14测试通过)
2009/09/09 PHP
php的list()的一步操作给一组变量进行赋值的使用
2011/05/18 PHP
解析PHP中$_FILES的使用以及注意事项
2013/07/05 PHP
大家须知简单的php性能优化注意点
2016/01/04 PHP
在JavaScript中使用inline函数的问题
2007/03/08 Javascript
用js替换除数字与逗号以外的所有字符的代码
2014/06/07 Javascript
自编jQuery插件实现模拟alert和confirm
2014/09/01 Javascript
jquery实现在光标位置插入内容的方法
2015/02/05 Javascript
JavaScript使ifram跨域相互访问及与PHP通信的实例
2016/03/03 Javascript
javascript常见数字进制转换实例分析
2016/04/21 Javascript
javascript实现抽奖程序的简单实例
2016/06/07 Javascript
javascript replace()第二个参数为函数时的参数用法
2016/12/26 Javascript
带你了解session和cookie作用原理区别和用法
2017/08/14 Javascript
vue项目中使用百度地图的方法
2018/06/08 Javascript
nodejs 如何手动实现服务器
2018/08/20 NodeJs
vue如何进行动画的封装
2018/09/26 Javascript
js刷新页面location.reload()用法详解
2019/12/09 Javascript
Python连接MySQL并使用fetchall()方法过滤特殊字符
2016/03/13 Python
Python网络编程之TCP与UDP协议套接字用法示例
2018/02/02 Python
Python实现的多项式拟合功能示例【基于matplotlib】
2018/05/15 Python
Python使用tkinter库实现文本显示用户输入功能示例
2018/05/30 Python
python绘制双Y轴折线图以及单Y轴双变量柱状图的实例
2019/07/08 Python
Flask框架钩子函数功能与用法分析
2019/08/02 Python
python lambda表达式在sort函数中的使用详解
2019/08/28 Python
python面向对象之类属性和类方法案例分析
2019/12/30 Python
Python中pass的作用与使用教程
2020/11/13 Python
css3利用transform变形结合事件完成扇形导航
2020/10/26 HTML / CSS
使用html5制作loading图的示例
2014/04/14 HTML / CSS
香港个人化生活购物网站:Ballyhoo Limited
2016/09/10 全球购物
幼儿园端午节活动总结
2015/05/05 职场文书
教学质量月活动总结
2015/05/11 职场文书
优秀共产党员主要事迹材料
2015/11/05 职场文书
MYSQL优化之数据表碎片整理详解
2022/04/03 MySQL
超越Nginx的Web服务器caddy优雅用法
2022/06/21 Servers