一、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. 标准C++（2）

    一.类 C++是一种面向对象的语言,它在C语言的基础上添加了一种新的数据结构,类 ——class class是一种复合型的数据结构 它能够由不同类型的变量及函数组成 C++中的class与struct ...

  2. PHP网站实现地址URL重定向

    网站建设中,通常会用到网站地址URL的重定向,这样的好处是有利于你网站的SEO优化,也就是让你的网站实现伪静态,下面简单介绍一下实现的两种方法: 1.在Apache配置文件中设置重定向 首先找到Apa ...

  3. 面试题--如何防止sql注入，使用PreparedStatement的预编译，传入的内容就不会和原来的语句发生任何匹配的关系，达到防止注入的方法

    PreparedStatement的用法 jdbc(java database connectivity,java数据库连接)的api中的主要的四个类之一的java.sql.statement要求开发 ...

  4. F查询与Q查询

    F查询 如果我们要对两个字段的值做比较,那该怎么做呢? Django 提供 F() 来做这样的比较.F() 的实例可以在查询中引用字段,来比较同一个 model 实例中两个不同字段的值. # 查询评论 ...

  5. leetcode-12-stack

    409. Longest Palindrome Given a string which consists of lowercase or uppercase letters, find the le ...

  6. writing a usb driver（在国外的网站上复制下来的）

    Writing a Simple USB Driver   From Issue #120April 2004 Apr 01, 2004  By Greg Kroah-Hartman  in Soft ...

  7. Kattis - doubleclique (图论)

    From : North American Invitational Programming Contest 2018 给你一个图,以及它的补图.如果部分点在原图中是团,并且其他的所有点在补图中也是团 ...

  8. HDU - 4763 Theme Section （KMP的next数组的应用）

    给定一个字符串,求出一个前缀A,使得字符串的构成可以表示成ABABA的形式(B可以为空串). 输出这个前缀的最大长度. KMP算法Next数组的使用. 枚举中间的每个位置,可以根据Next数组求出这个 ...

  9. 29、在android中采用动画方案来弹出窗口

    1.自定义style 2.使用方法: buttonWhat.setOnClickListener(new OnClickListener() { @Override public void onCli ...

  10. 28、editText只输入英文字母和'-'，用于授权码输入

    InputFilter filter = new InputFilter() { @Override public CharSequence filter(CharSequence source, i ...