一、cookie

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title></title>

     </head>

     <body>

         <input type="text" name="username" id="username" value="">

         <input type="password" name="password" id="password" value="">

         <button type="button" name="button" id="btn">删除cookie</button>

         <script type="text/javascript">

             // 1、设置、获取

             var d = new Date();

             d.setHours(d.getHours() + 1);//1小时后过期

             // path=/ 此时的/代表的是网站中所有的目录都可以访问这个cookie

             document.cookie='username=zhangsan;expires='+d.toUTCString()+";path=/";//设置cookie

             document.cookie;//获取所有的cookie

             console.log(document.cookie)

             // 2.设置、获取、删除cookie

             // setCookie('password','123456',0.5*3600*1000)//30分钟后失效

             // setCookie('username','zhangsan',0.5*3600*1000)//30分钟后失效

             var btnObj = document.getElementById('btn')

             btnObj.onclick = function(){

                 delCookie('username');

                 delCookie('password');

             }

             function setCookie(name,value,expires){

                 //计算有效期

                 var d = new Date();

                 //设置有效期

                 d.setTime(d.getTime()+expires);

                 //设置cookie

                 document.cookie = name +'='+value+';expires='+d.toUTCString();

             }

             function getCookie(name) {

                 //获取cookie

                 var cookieStr = document.cookie;

                 //根据；拆分

                 var cookieArr = cookieStr.split(';');

                 //获取对应的cookie值

                 name += '=';//获取的cookie值都是后面有=

                 var result = '';

                 for(var i=0;i<cookieArr.length;i++) {

                     //没一个cookie值得前面都有一个空格，将空格删除，再去查找对应的name值

                     var tmp = cookieArr[i].trim();

                     if(tmp.indexOf(name) == 0) {

                         //如果查找成功，则直接返回

                         result = tmp.slice(name.length);

                         break;

                     }

                 }

                 //返回结果

                 return result;

             }

             function delCookie(name) {

                 var d = new Date();

                 d.setTime(d.getTime()-1000);

                 document.cookie = name+'=;expires='+d.toUTCString();

             }

         </script>

     </body>

 </html>

二、sessionStorage

【

　html5新增的会话存储对象；

生命周期：关闭窗口或标签页之后将会删除这些数据

　存储上限限制：不同的浏览器存储的上限也不一样，但大多数浏览器把上限限制在5MB以下。
】

使用方法：

 string sessionStorage.getItem(string key) ：返回键名(key)对应的值(value)。若没有返回null。

 void sessionStorage.setItem(string key, string value) ：该方法接受一个键名(key)和值(value)作为参数，将键值对添加到存储中；如果键名存在，则更新其对应的值。

 void sessionStorage.removeItem(string key) ：将指定的键名(key)从 sessionStorage 对象中移除。

 void sessionStorage.clear() ：清除 sessionStorage 对象所有的项。

 sessionStorage.setItem('username','admin') //存储数据

 sessionStorage.getItem('username')//获取

 sessionStorage.clear();//清楚所有

 sessionStorage.removeItem('username')//清楚指定

 也可以存储JSON对象【JSON.stringify(obj)和JSON.parse(stry)】

 eg:

 var obg = {

 　　name:'tom',

 　　age:22

 };

 //存储值：将对象转换为Json字符串

 sessionStorage.setItem('user',JSON.stringify(obj));

 //取值时：把获取到的Json字符串转换回对象

 var userJsonStr = sessionStorage.getItem('user');

 userObj = JSON.parse(userJsonStr);

 console.log(userObj.name);//tom

js中cookie、sessionStorage、localStorage的更多相关文章

  1. js中cookie，localStorage(sessionStorage)的存取

    一.cookie (原生的不好用,自己简单封装) 1. 存cookie的方法: function setCookie(c_name,value,expiredays) { var exdate=new ...

  2. JS中Cookie、localStorage、sessionStorage三者的区别

    cookie:大小4k,一般由服务器生成,可设置失效时间,关闭浏览器后失效,与服务器通信时:每次都会携带HTTP头中,如果使用cookie保存过多数据会带来性能问题 localhostStorage: ...

  3. session,cookie,sessionStorage,localStorage的区别及应用场景

    session,cookie,sessionStorage,localStorage的区别及应用场景 浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式,可以利用cookie,session等跟 ...

  4. 缓存session,cookie,sessionStorage,localStorage的区别

    https://www.cnblogs.com/cencenyue/p/7604651.html(copy) 浅谈session,cookie,sessionStorage,localStorage的 ...

  5. 彻底弄清楚session,cookie,sessionStorage,localStorage的区别及应用场景（面试向）

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_94 客户端状态保持是一个老生常谈的问题了,归根结底追踪浏览器的用户身份及其相关数据无非就是以下四种方式:session,cooki ...

  6. session,cookie,sessionStorage,localStorage的相关设置以及获取删除

    一.cookie 什么是 Cookie? "cookie 是存储于访问者的计算机中的变量.每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie.你可以使用 JavaScrip ...

  7. js中cookie的使用

    js中并没有封装好的存储cookie,取得cookie和删除cookie的函数,所以必须得自己手动处理,并且cookie中也只能存储字符串,不能存储数组等复杂的数据类型. // 添加cookie fu ...

  8. js中cookie操作

    js中操作Cookie的几种常用方法 * cookie中存在域的概念,使用path和domain区分: * 在同一域中的set和del可以操作同一名称的cookie,但不在同一域中的情况下,则set无 ...

  9. js 中cookie 使用

    一个系统有多种 角色, 每一种角色不同权限.后台请求的数据根据权限展示 ,所以要把权限保存在浏览器中. 首先 引入 在页面 <script type="text/javascript& ...

  10. jquery.cookie.js中$.cookie() 使用方法

    定义:让网站服务器把少量数据储存到客户端的硬盘或内存,从客户端的硬盘读取数据的一种技术: 下载与引入:jquery.cookie.js基于jquery:先引入jquery,再引入:jquery.coo ...

随机推荐

  1. linux学习-使用者身份切换

    在 Linux 系统当中还要作身份的变换?这是为啥?可能有底下几个原因啦! 使用一般账号:系统平日操作的好习惯 用较低权限启动系统服务 软件本身的限制 由于上述考虑,所以我们都是使用一般账号登入系统的 ...

  2. matlab callback 数据传递

    M文件中内的每个Callback都可以视为一个独立的可执行的接口,因此,任一个Callback触发后所执行的运算值若要在其他Callback中使用,就无法与MATLAB工作空间内的变量继续执行操作,也 ...

  3. Mime类型与文件后缀对照表及探测文件MIME的方法

    说明:刚刚写了一篇<IHttpHandler的妙用(2):防盗链!我的资源只有我的用户才能下载>的文章,网址:http://blog.csdn.net/zhoufoxcn/archive/ ...

  4. 正在创建模型，此时不可使用上下文“的解决办法。 正在创建模型，此时不可使用上下文。如果在 OnModelCreating 方法内使用上下文或如果多个线程同时访问同一上下文实例，可能引发此异常。请注意不

    //默认为: Database.SetInitializer<testContext>(null);//这里报错, 检查原因:catch(Exception ex) 错误提示: 基础连接未 ...

  5. 微信小程序开发 -- 点击右上角实现转发功能

    // 在page的js文件中加入以下代码/** * 用户点击右上角分享 */ onShareAppMessage: function () { }

  6. 触屏版轻量级分页插件jqPagination分享

    说到HTML5和jquery上的分页问题,优秀的分页插件网上一抓一大把,然而同时适合兼容在Ipad和手机端的网站分页却不是特别多. 或许有人会说,触屏现在流行下拉底部后加载下一页内容,类似微博和QQ空 ...

  7. Struts2报错：No result defined for action xxx and result input

    case如下: 1. 后台程序要升级, 修改了一些功能,但是没有修改或者添加action的参数. 2. 数据库需要升级,执行了一些sql,修改过action的值. 3. 当修改某个已经存在的记录,然后 ...

  8. 如果奇迹有颜色，那么一定是暴力or模拟比较6

    模拟就是一个思想,给你一个东西,没有很好的算法去解决,只需要计算机去暴力,优雅的暴力就可以叫算法了 主要还是考大家的代码能力,这次题目应该不需要任何前置技能. 1001 Time Limit(Comm ...

  9. 九度oj 题目1443：Tr A

    题目描述: A为一个方阵,则Tr A表示A的迹(就是主对角线上各项的和),现要求Tr(A^k)%9973. 输入: 数据的第一行是一个T,表示有T组数据. 每组数据的第一行有n(2 <= n & ...

  10. 九度oj 题目1370：数组中出现次数超过一半的数字

    题目描述: 数组中有一个数字出现的次数超过数组长度的一半,请找出这个数字.例如输入一个长度为9的数组{1,2,3,2,2,2,5,4,2}.由于数字2在数组中出现了5次,超过数组长度的一半,因此输出2 ...