jquery jquery本地存储—cookie、localStorage和sessionStorage

于 2021-09-15 17:05:40 发布
阅读量904 收藏 3
点赞数
文章标签： jquery html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/guoqingru0311/article/details/120308804
版权

jquery jquery本地存储—cookie、localStorage和sessionStorage

在这里插入图片描述
首先导入需要的js库
在这里插入图片描述

1、cookie

在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/jquery.cookie.js"></script>
    <script type="text/javascript">
        $(function () {

            // 如下所示：mycookie：为键名;ok：为键值 ; expires：为过期时间; path:为存储的路径（”/“:表示根目录下）
            $.cookie("mycookie","ok!",{expires:7,path:'/'})
            alert($.cookie('mycookie'))
        })

    </script>
    <title>cookie</title>
</head>
<body>
    <h1>测试页面</h1>
</body>
</html>

效果显示如下：
在这里插入图片描述

2、localStorage

在这里插入图片描述
在这里插入图片描述
代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>localStorage</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/jquery.cookie.js"></script>
    <script type="text/javascript">
        // 设置：
        // 方式1：
        localStorage.setItem('data','123456');
        // 方式2：
        localStorage.info='789';        // info:为键名

        // 获取
        // 方式1设置的获取方式
        var item = localStorage.getItem('data');
        var info = localStorage.info;

        console.log(item);
        console.log(info);

        // 删除
        localStorage.removeItem('data');
        localStorage.removeItem('info');
    </script>
</head>
<body>
    <h1>测试webstorage</h1>

</body>
</html>

显示效果如下所示：
在这里插入图片描述

3、sessionStorage

在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>sessionStorage</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/jquery.cookie.js"></script>
    <script type="text/javascript">
        // 设置：
        // 方式1：
        sessionStorage.setItem('gqr','123456');
        // 方式2：
        sessionStorage.info='999';        // info:为键名

        // 获取
        // 方式1设置的获取方式
        var item = sessionStorage.getItem('gqr');
        var info = sessionStorage.info;

        console.log(item);
        console.log(info);

        // 删除
        sessionStorage.removeItem('data');
        sessionStorage.removeItem('info');
    </script>
</head>
<body>
    <h1>测试webstorage</h1>

</body>
</html>

效果如下所示：
在这里插入图片描述

郭庆汝
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用jquery操作session方法分享
Dove言和
05-20 2524
今天分享的是使用jquery来处理session。我们将使用sessionStorage对象，它类似与localStorage对象，只是sessionStorage是用来储存session数据的。当用户关闭浏览器这个数据会被清除掉。 语法： 添加数据 $.session.set('key', 'value') 删除数据 $.session.remove('key'); 获取...
jQuery中localStorage及sessionStorage的使用
low666的博客
05-07 3825
jQuery中localStorage及sessionStorage的使用 localStorage、sessionStorage理解 localStorage：在HTML5中，新加入的一个l特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。 sessio...
【Jquery】------- Jquery 监听本地存储 sessionStorage,localStorage 的键值 示例代码
皮皮冰要做大神
09-21 1208
//监听本地存储 RISKID 键 值 window.addEventListener('storage',function (e) { //获取被修改的键值 if (e.key == 'RISKID') { console.log(e); } },false); 提示：自己测试 就能明白怎么使用了 ...
jquery sessionStorage、 cookie、 localStorage利用
SURE19851218的专栏
05-07 208
1.sessionStorage sessionStorage只会在关闭窗口前有效，只要窗口关闭，数据就会立刻删除 实例： function testCount() { var storage = window.sessionStorage; var itemKey='key'; if (itemKey) { ...
js、jquery、vue中使用浏览器的储存方式cookie,LocalStorage和SessionStorage
浩星
01-22 1159
前言： 在我们的项目中经常会遇到需要临时储存数据的情况，我们可供选择的方式有很多，比如：cookie,localstorage,sessionstorage,或者保存在请求后台的head中（比如token）,我们在这里详细说下他们的方法。 第一：cookie js/jq: 暂无 vue：这里使用js-cookie 具体步骤：更多介绍 1、安装js-cookie n...
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
10-19
在Web开发中，数据存储是不可或缺的一部分，jQuery提供了一些便捷的方法来访问和操作浏览器的本地存储，包括cookie、localStorage和sessionStorage。这三个机制都用于在客户端存储数据，但它们各有特点和适用场景。 ...
jquery中cookie用法实例详解(获取,存储,删除等)
11-25
本文将深入探讨jQuery中cookie的使用方法，包括获取、存储和删除等操作。 首先，让我们理解一下Cookie的基本概念。Cookie是服务器发送到用户浏览器并由浏览器保存的一小段文本信息。它通常包含名称、值、过期日期、...
jQuery使用Cookie和JSON记录用户浏览历史
10-04
需要注意的是，Cookie有大小限制（通常为4KB），因此在存储大量浏览历史时应考虑其他存储方案，如使用HTML5的`localStorage`或`sessionStorage`。同时，Cookie会随HTTP请求一起发送，过多的Cookie可能会影响性能，...
详解jQuery的Cookie插件
11-26
jQuery的Cookie插件是用于管理...对于存储较大数据，建议使用localStorage或sessionStorage等其他本地存储机制。同时，跨域设置Cookie需要考虑同源策略，一般需要服务器端配合设置`document.domain`或使用CORS等方法。
jquery.storage.js
04-01
第一次写的jQuery插件，封装了html5中的sessionStorage和localStorage存储功能
使用jquery操作session
weixin_34175509的博客
01-21 803
摘要： 　　今天分享的是使用jquery来处理session。我们将使用sessionStorage对象，它类似与localStorage对象，只是sessionStorage是用来储存session数据的。当用户关闭浏览器这个数据会被清除掉。 简介： 　　JquerySession是一个基于jquery的用来处理session的库，使用它可以简化我们的工作。在使用之前需要引入jquery。...
jquery操作cookie
祈澈菇凉
03-21 6307
原文链接：http://blog.csdn.net/qq_37936542/article/details/79076128需求：用户登录成功之后记录用户名和密码，下一次打开登录页面直接填充一：引入js文件jquery.min.js下载地址：点击打开链接jquery.cookie.js下载地址：点击打开链接[html] view plain copy &lt;script src="jQuery....
cookie的保存 jq_jQuery 操作cookie保存用户浏览信息
weixin_39972777的博客
12-20 156
// 读取cookiefunction showHistory() {var str='';var historyCooike = $j.cookie('historyCooike');var cookieObjs = null;if(historyCooike != null){cookieObjs = jQuery.parseJSON(historyCooike);for(var i=0;iv...
cookie的保存 jq_使用jQuery操作Cookies
weixin_39687786的博客
12-20 888
Cookies是一种能够让网站服务器把少量数据储存到客户端的硬盘或内存，或是从客户端的硬盘读取数据的一种技术。当你浏览某网站时，你硬盘上会生产一个非常小的文本文件，它可以记录你的用户ID、密码、浏览过的网页、停留的时间等信息。当你再次来到该网站时，网站通过读取Cookies，得知你的相关信息，就可以做出相应的动作，如在页面显示欢迎你的标语，或者让你不用输入ID、密码就直接登录等等。从本质上讲，它可...
浏览器多窗口同步_JavaScript浏览器端数据存储方案之Web Storage篇
weixin_30632267的博客
01-25 1229
打开UC浏览器 查看更多精彩图片在做项目的过程中，我们经常遇到需要把信息存储在本地的情况，比如权限验证的token、用户信息、埋点计数、客户配置的皮肤信息或语言种类等，我们可以暂存一下避免浏览器不必要的请求和客户多余操作，给客户使用带来方便。这篇文章主要介绍localStorage和sessionStorage。HTML5中 Web Storage 的出现，主要是为了弥补使用 Cookie 作为本...
jQuery操作session
热门推荐
最有趣的编程
06-24 1万+
添加数据    $.session.set('key', 'value')删除数据    $.session.remove('key');获取数据    $.session.get('key');清除数据    $.session.clear();
H5的storage(sessionstorage&localStorage)简单存储删除
生命不息，学习不止！
03-20 1万+
一 众所周知，H5的storage有sessionstorage&localStorage，其中他们的共同特点是API相同 下面直接上代码，storage中的存储与删除: html> lang="en"> charset="UTF-8"> name="viewport" content="width=device-width, initial-scal
前端使用JQuery在页面之间传递参数，cookie与session与sessionStorage，多行添加点击事件
蚂蚁
06-01 3829
使用场景 在开发管理信息系统与商城网站时，会涉及到查看某个选项中信息 如在购物商城中查看某个商品的详细信息，或者在管理信息系统中查看某个信息的详细信息 那么，如何在前端把所需数据从一个页面传入到另外一个页面中 此处两个页面的跳转，与后端是完全没有关系的 实现方法如下 方法一：使用url传递参数，在详情页获取url并实现参数截取 定义一个表格，手动添加几行，在跳转的链接中，将要传入de...
本地存储 localStorage 和 sessionStorage
最新发布
10-14
localStorage 和 sessionStorage 都是 HTML5 提供的 Web 存储 API，用于在客户端存储数据。它们的区别在于存储数据的生命周期不同。 localStorage 存储的数据没有过期时间，除非用户手动清除或者使用代码清除。而 sessionStorage 存储的数据只在当前会话（session）有效，当用户关闭浏览器窗口后，数据就会被清除。 使用方式类似，都是通过 JavaScript 的 localStorage 和 sessionStorage 对象进行操作。例如，存储数据可以使用 setItem 方法，获取数据可以使用 getItem 方法。 示例代码： ```javascript // 存储数据到 localStorage localStorage.setItem('key', 'value'); // 从 localStorage 获取数据 const value = localStorage.getItem('key'); console.log(value); // 输出：value // 存储数据到 sessionStorage sessionStorage.setItem('key', 'value'); // 从 sessionStorage 获取数据 const value = sessionStorage.getItem('key'); console.log(value); // 输出：value ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值