jQuery本地存储

1.概念

本地存储分为cookie,以及新增的localStorage和sessionStorage

(1)cookie存储在本地,容量最大4k,在同源的http请求时携带传递,损耗带宽,可设置访问路径,只有此路径及此路径的子路径才能访问此cookie,在设置的过期时间之前有效。

服务器环境运行:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>本地存储</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript">
/设置cookie,名,值,过期时间,路径/
$.cookie(‘xiong‘,‘haha‘,{expires:7,path:‘/‘});
/读取cookie/
var val = $.cookie(‘xiong‘);
alert(val);
</script>
</head>

<body>

<h1>text page</h1>

</body>
</html>

(2)localStorage存储在本地,容量为5M或者更大,不会在请求时候携带传递,在所有同源窗口中共享,数据一直有效,除非人为删除,可作为长期数据

(3)sessionStorage 存储在本地,容量为5M或者更大,不会在请求时候携带传递,在同源的当前窗口关闭前有效

localStorage和sessionStorage合称web storage,支持事件通知机制,可以将数据更新的通知监听者,api接口使用更方便

iPhone的无痕浏览不支持web storage,只能用cookie

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>webstorage</title>
<script type="text/javascript">

localStorage.setItem("dat","123");
sessionStorage.setItem("dat01","456");

</script>

</head>

<body>

<h1>web storage</h1>

</body>
</html>

原文地址:http://blog.51cto.com/13742773/2342253

时间: 2024-10-24 05:56:05

jQuery本地存储的相关文章

我的项目9 网页之间传值二 HTML5本地存储

在我的项目1中写到过网页之间传值,但是那种方式在andriod4.0和以下版本就传不过去了,于是乎,就打起了HTML5本地存储的注意.大家看一下代码就知道什么意思了: 发送数据页面: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript">

利用html5的本地存储功能实现登录用户信息保存

在HTML5中,本地存储是一个window的属性,包括localStorage和sessionStorage,从名字应该可以很清楚的辨认二者的区别,前者是一直存在本地的,后者只是伴随着session,窗口一旦关闭就没了.二者用法完全相同,这里以localStorage为例. 用户名.密码保存,自动登录等,可以通过设置cookie实现,第一次登录网站后在本地计算机的中写入cookie,之后再次登录此网站查看cookie中现有的值,用cookie值进行网站登录即可.但是 cookie 不适合大量数据

一起来做chrome扩展《本地存储localStorage》

chrome中的本地存储其实也是用的HTML5中localStorage,唯一区别是chrome扩展有自己的localStorage,它属于这个扩展,而不属于一个域名.得用这一点可以很好的处理扩展自己的一些数据,而不受访问网站和域名的影响. localStorage基础 localStorage是HTML5特性,所以有些浏览器不一定支持,不过我们这里讲的是chrome扩展,所以完全不用担心这个问题.如果想在WEB页面上使用,那就要检查一下是不是支持它 可以这样的检测: if(window.loc

兼容多浏览器的本地存储

在做考试系统时需要解决这样一个问题,就是当考生考试时可能出出现断网.关闭浏览器,刷新等问题,数据此时可能没有及时写入数据库,所以造成数据丢失问题,,所以这里就需要用到本地存储,以前的版本都是用cookie,但是不得不说cookie太小了,只有可怜的4k,而机房的网有时候实在是让人捉急,所以,考虑换一种方案. 直接读取XML实现方式 因为本地存储平时接触的不是太多,开始想的只是简单的读取本地的XML,做起来倒是挺容易的,一个语句就能搞定: <script language="javascri

Html5 本地存储 实现刷新页面数据依然存在

1.首先需要引入jquery 2. <body> a<input type="text" id="a"><br> b<input type="text" id="b"><br> <button onclick="test()">click</button> <button onclick="c()"

html5 本地存储----localstorage初体验

HTML5虽未来到其鼎盛时期,但这并不妨碍我们在实际项目中渐进使用HTML5的一些特性.就我所做的项目而言,应用的HTML5相关特性有:data-自定义属性.placeholder.以及email类型input文本框.最近了解了一下html的本地存储功能(例如cookies和localstorage),今天主要要和大家分享的是localstorage的一些基础常识: 废话不多说直接上代码(有注释),大家可以看看: <!doctype html> <html lang="en&q

HTML5本地存储(转)

html5带给我们的不仅仅是更多语义丰富的标签,还有更多新特性,比如本地存储.要在客户端保存用户一些数据,我们首选使用 cookie,但是cookie最多只能存储4kb,而HTML5的本地存储localStorage可以存储5M的数据,这将对web开发以及移动终端 应用带来革命性的转变. 查看演示DEMO 目前主流浏览器都支持localStorage本地存储,而微软从IE8就出人意料的开始支持localStorage.本文将和您一起分享HTML5本地存储localStorage相关知识,通过实例

HTML5 本地存储+layer弹层组件制作记事本

什么是 HTML5 Web 存储? 使用HTML5可以在本地存储用户的浏览数据. 早些时候,本地存储使用的是 cookie.但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据,而不影响网站的性能. 数据以 键/值 对存在, web网页的数据只允许该网页访问使用. 保存数据:localStorage.setItem(key,value); 读取数据:localStorage.getItem(key); 删除单个数据:l

h5的本地存储——sessionStorage,localStorage

HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 SessionStorage, LocalStorage, Cookie这三者都可以被用来在浏览器端存储数据,localStorage和sessionStorage都是本地存储. Cookie会在每次发送HTTP请求时附加到Cookie头字段,服务器以此得知用户所处的状态. Web Storage的概念和cookie相似,