一、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. Voyager如何使用Compass

    Compass由Resources,Commands,Logs三个部分组成 Resources包含了Links和Fonts: Commands可以执行php命令,比如创建model: 创建一个Down ...

  2. Ubuntu下kaldi安装

    该文章为博主原创,如若转载请注明出处:https://www.cnblogs.com/fengleixue/p/9482202.html 因公司业务需要需使用kaldi语音识别工具,现将kaldi环境 ...

  3. LeetCode之Weekly Contest 93

    第一题:二进制间距 问题: 给定一个正整数 N,找到并返回 N 的二进制表示中两个连续的 1 之间的最长距离. 如果没有两个连续的 1,返回 0 . 示例 1: 输入:22 输出:2 解释: 22 的 ...

  4. 【mysql】【转发】my.cnf 讲解

    PS:本配置文件针对Dell R710,双至强E5620.16G内存的硬件配置.CentOS 5.6 64位系统,MySQL 5.5.x 稳定版.适用于日IP 50-100w,PV 100-300w的 ...

  5. 《linux设备驱动开发详解》笔记——8阻塞与非阻塞IO

    8.1 阻塞与非阻塞IO 8.1.0 概述 阻塞:访问设备时,若不能获取资源,则进程挂起,进入睡眠状态:也就是进入等待队列 非阻塞:不能获取资源时,不睡眠,要么退出.要么一直查询:直接退出且无资源时, ...

  6. day 37 MySQL行(记录)的详细操作

    MySQL行(记录)的详细操作   阅读目录 一 介绍 二 插入数据INSERT 三 更新数据UPDATE 四 删除数据DELETE 五 查询数据SELECT 六 权限管理 一 介绍 MySQL数据操 ...

  7. Python学习笔记：字符串

    字符串 字符串定义:字符串可以使用一对单引号.双引号或三引号来定义,即便是单个字符也会当做字符串来处理(Python中没有字符类型,单个字符也就是只有一个字符的字符串而已). 原始字符串:字符串中反斜 ...

  8. 简单了解hash

    hash,译为散列或哈希.就是把任意长度的输入(可变类型除外)经过hash算法,输出成固定长度的输出,该输出就是hash值.哈希值比原有的输出占用空间要小,但是不同的输出可能会hash出一样的值,所以 ...

  9. LeetCode（44） Wildcard Matching

    题目 Implement wildcard pattern matching with support for '?' and '*'. '?' Matches any single characte ...

  10. CentOS 7.X 中systemctl命令用法详解

    systemctl是RHEL 7 的服务管理工具中主要的工具,它融合之前service和chkconfig的功能于一体.可以使用它永久性或只在当前会话中启用/禁用服务,下面来看CentOS 7.X 中 ...