出处:http://blog.csdn.net/djzhao627/article/details/50747628

首先说一下LocalStorage和SessionStorage

LocalStorage

  • 是对Cookie的优化
  • 没有时间限制的数据存储
  • 在隐私模式下不可读取
  • 大小限制在500万字符左右,各个浏览器不一致
  • 在所有同源窗口中都是共享的
  • 本质是在读写文件,数据多的话会比较卡(firefox会一次性将数据导入内存)
  • 不能被爬虫爬取,不要用它完全取代URL传参
  • IE7及以下不支持外,其他标准浏览器都完全支持

SessionStorage

  • 针对一个 session 的数据存储
  • 大小限制在5M左右,各个浏览器不一致
  • 仅在当前浏览器窗口关闭前有效(适合会话验证)
  • 不在不同的浏览器窗口中共享,即使是同一个页面

JS下的操作方法

  • 获取键值:localStorage.getItem(“key”)
  • 设置键值:localStorage.setItem(“key”,”value”)
  • 清除键值:localStorage.removeItem(“key”)
  • 清除所有键值:localStorage.clear()
  • 获取键值2:localStorage.keyName
  • 设置键值2:localStorage.keyName = “value”

JQ下的操作方法(JS方法前加”window.”)

  • 获取键值:window.localStorage.getItem(“key”)
  • 设置键值:window.localStorage.setItem(“key”,”value”)
  • 清除键值:window.localStorage.removeItem(“key”)
  • 清除所有键值:window.localStorage.clear()
  • 获取键值2:window.localStorage.keyName
  • 设置键值2:window.localStorage.keyName = “value”

示例

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <script type="text/javascript" charset="utf-8" src="js/jquery.min.js"></script>
  7. <script type="text/javascript">
  8. // JS操作部分
  9. localStorage.JSa="JSA";
  10. document.write(localStorage.JSa);
  11. localStorage.setItem('JSb','&nbsp;JSB');
  12. document.write(localStorage.getItem('JSb'));
  13. // JQuery操作部分
  14. $(function(){
  15. window.localStorage.JQa="JQA";
  16. $("#a").text(window.localStorage.JQa);
  17. window.localStorage.setItem('JQb','JQB');
  18. $("#b").text(window.localStorage.getItem('JQb'));
  19. });
  20. </script>
  21. </head>
  22. <body>
  23. <p id="a"></p>
  24. <p id="b"></p>
  25. </body>
  26. </html>

运行结果: 

注:typeOf(localStorage.keyName)可与”undefined”进行判断该键值是否已存在

JQuery和JS操作LocalStorage/SessionStorage的方法(转)的更多相关文章

  1. JQuery和JS操作LocalStorage/SessionStorage的方法

    LocalStorage 是对Cookie的优化 没有时间限制的数据存储 在隐私模式下不可读取 大小限制在500万字符左右,各个浏览器不一致 在所有同源窗口中都是共享的 本质是在读写文件,数据多的话会 ...

  2. Jquery.cookie.js 源码和使用方法

    jquery.cookie.js源码和使用方法 jQuery操作cookie的插件,大概的使用方法如下 $.cookie(‘the_cookie’); //读取Cookie值$.cookie(’the ...

  3. jquery.cookie.js 操作cookie实现记住密码功能的实现代码

    jquery.cookie.js操作cookie实现记住密码功能,很简单很强大,喜欢的朋友可以参考下.   复制代码代码如下: //初始化页面时验证是否记住了密码 $(document).ready( ...

  4. JS操作字符串常用的方法

    JS操作String对象的方法 charAt(index):返回指定索引处的字符串charCodeAt(index):返回指定索引处的字符的Unicode的值concat(str1,str2,...) ...

  5. JS操作数组常用的方法

    JS操作Array对象的方法 concat(arr1,arr2,...):连接数组indexOf(value):返回数组中value的第一个索引join(separator):将数组中所有的元素连接由 ...

  6. js操作html的基本方法

    刚学了js操作html的基本方法,在写代码过程中,有很多格式不规范,忘记加双引号尤其重要,通常这 样的错误很容易范,并且这种错误很难找.随着代码学习量越来越多,很多写法容易搞混.今天记录一下,以便后期 ...

  7. 前端 JS,localStorage/sessionStorage、cookie 及 url 等实现前台数据共享、传输

    需求是这样的:需要统计用户公司某款产品用户的回馈情况,美工给的设计多个psd,每个页面里面都有一个选择题,让用户选择自己的答案,最后经过几次选择之后在最后一个页面统一提交到后台!所以这里引出的技术需求 ...

  8. jQuery.cookie.js插件了解及使用方法

    jquery.cookie.js插件实现浏览器的cookie存储,该插件是基于jquery开发,方便cookie使用. jquerycookie.js的下载地址 http://plugins.jque ...

  9. 使用Jquery.cookie.js操作cookie

    query.cookie.js是一个基于jquery的插件,点击下载! 创建一个会话cookie: $.cookie(‘cookieName’,'cookieValue’); 注:当没有指明cooki ...

随机推荐

  1. pandas groupby 使用

    so useful~ refer to: http://kekefund.com/2016/06/17/pandas-groupby/

  2. ambassador 学习三 限速处理

    与认证类似ambassador 也是委托给三方的其他服务进行限速处理 基本的环境安装可以参考相关文档,主要还是qotm 服务 官方参考实现的简单限速服务 --- apiVersion: v1 kind ...

  3. vs2005新建项目中没有ASP.NET WEB应用程序的解决方法

    在vs2003的年代,我们可以在项目模板中选择创建"asp.net web应用程序",可是到vs2005中,就变成了创建网站,原有的创建"asp.net web应用程序& ...

  4. Servlet技术基础

    由于Servlet部分涉及较多的类,要想尽快掌握Servlet基础,必须熟悉使用这些类之间的关系以及其常用的方法. 主要讲解部分包括: 1)通过实现Servelt接口来编写Servlet 2)熟悉Se ...

  5. Spring集成Mybatis(Dao方式开发)

    Spring整成Mybatis注意事项:  1. 关键jar包不能少 2.可以单独整理好Mybatis框架,测试无误再集成Spring 3.集成时,参数级别的细节可以选择忽略,但思路必须清晰 代码如下 ...

  6. js setInterval每隔一段时间执行一次

    js setInterval每隔一段时间执行一次setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式.setInterval() 方法会不停地调用函数,直到 clearI ...

  7. 根据tomcat的日志判断web的发布路径以及服务路径

    [ContainerBackgroundProcessor[StandardEngine[Catalina]]] org.apache.catalina.startup.HostConfig.unde ...

  8. VirtualBox的vdi映像导入遇到的uuid冲突问题 (转)

      virtualbox导入vdi文件时出现下面的问题: 打开hard disk D:\software\GT5.0.0.vdi 失败 Cannot register the hard disk 'D ...

  9. spark on es 多索引查询

    核心接口 trait SparkOnEsService { val conf = new SparkConf // conf.setMaster("local[10]") val ...

  10. var和let示例

    声明后未赋值,表现相同 (function() { var varTest; let letTest; console.log(varTest); //输出undefined console.log( ...