cookie、localStorage、sessionStorage的使用

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>浏览器本地存储</title>

</head>

<body>

    <button onclick="fun1()">cookie存储</button>

    <button onclick="fun2()">cookie获取</button>

    <button onclick="fun3()">localStorage存储</button>

    <button onclick="fun4()">localStorage获取</button>

    <button onclick="fun5()">sessionStorage存储</button>

    <button onclick="fun6()">sessionStorage获取</button>

    <script>

        // 注意：cookie必须运行在服务器环境下,用http协议访问

        function fun1(){

            var dateExpire=new Date();

            dateExpire.setDate(dateExpire.getDate()+1);

            console.log(dateExpire) //cookie的过期时间，设置为1天后过期

            document.cookie="he=哈哈哈;path=/;expires="+dateExpire;

        }

        function fun2(){

            var str=document.cookie;

            console.log(str)

        }

        var hxObj={

            admin:{

                name:'hx',

                age:18

            },

            power:[

                {power_id:1,power_name:'嘎嘎'},

                {power_id:2,power_name:'哈哈'}

            ],

            role:{

                role_id:1,

                role_name:'萨芬'

            }

        }

        //注意：localStorage没有过期时间

        function fun3(){

            localStorage.setItem('he','嘻嘻')

            console.log(JSON.stringify(hxObj))

            localStorage.setItem('hxObj',JSON.stringify(hxObj))

        }

        function fun4(){

            var str=localStorage.getItem('he')

            console.log(str)

            console.log(JSON.parse(localStorage.getItem('hxObj')))

        }

        //注意：sessionStorage关闭浏览器或窗口就消失

        function fun5(){

            sessionStorage.setItem('he','哈哈')

        }

        function fun6(){

            var str=sessionStorage.getItem('he')

            console.log(str)

        }

    </script>

</body>

</html>

JavaScript：浏览器的本地存储的更多相关文章

  1. 使用userData兼容IE6-10，chrome，FF 及360等浏览器的本地存储

    开发过程中涉及本地存储的使用,IE很多版本都不支持localStorage,没办法,就得兼容使用userData了.废话不说了,看代码: (function(window){var LS;(funct ...

  2. JavaScript / 本地存储

    cookie 首先让我们先了解一下,什么是cookie,cookie是浏览器提供的一种机制,他将document.cookie的接口提供给JavaScript使其可以对cookie进行控制,但cook ...

  3. store.js - 轻松实现本地存储（LocalStorage）

    store.js 是一个兼容所有浏览器的 LocalStorage 包装器,不需要借助 Cookie 或者 Flash.store.js 会根据浏览器自动选择使用 localStorage.globa ...

  4. Localstorage本地存储兼容函数

    前言HTML5提供了本地存储的API:localstorage对象和sessionStorage对象,实现将数据存储到用户的电脑上.Web存储易于使用.支持大容量(但非无限量)数据同时存储,同时兼容当 ...

  5. (转)HTML5 本地存储

    原文:http://www.cnblogs.com/rainman/archive/2011/06/22/2086069.html HTML5 本地存储 1.sessionStorage 2.loca ...

  6. 本地存储 cookie,session,localstorage( 一)基本概念及原生API

    http://www.w3school.com.cn/html5/html_5_webstorage.asp http://adamed.iteye.com/blog/1698740 localSto ...

  7. web前端实现本地存储

    当我们在提及web前端本地存储的时候,首先需要介绍一下本地化存储的概念和历史.本地化存储从来不是一个新奇的概念,因为web应用程序一直在追求的就是媲美甚至超越桌面应用程序.但是桌面应用程序一直优于we ...

  8. 本地存储localStorage以及它的封装接口store.js的使用

    本地存储localStorage以及它的封装接口store.js的使用 sublime-text chrome javascript readyGo 2016年11月20日发布   0 推荐 9 收藏 ...

  9. HTML5 本地存储形式

    1.sessionStorage 2.localStorage 3.Database Storage 4.globalStorage 5.兼容性 参考文献 本地持久化存储一直是本地客户端程序优于 we ...

随机推荐

  1. Ceph Bluestore首测

    Bluestore 作为 Ceph Jewel 版本推出的一个重大的更新,提供了一种之前没有的存储形式,一直以来ceph的存储方式一直是以filestore的方式存储的,也就是对象是以文件方式存储在o ...

  2. new Date在不同浏览器识别问题

    原文 http://www.cnblogs.com/yangxiaopei/articles/4708157.html 4. 正确的做法 以下列出正确的做法: var time1 = (timesta ...

  3. Netty源码解析 -- 内存对齐类SizeClasses

    在学习Netty内存池之前,我们先了解一下Netty的内存对齐类SizeClasses,它为Netty内存池中的内存块提供大小对齐,索引计算等服务方法. 源码分析基于Netty 4.1.52 Nett ...

  4. Docker学习—Swarm

    前言: 前一篇<Docker学习-Machine>中对Machine 进行了学习,本篇继续学习Swarm,那么Swarm是什么呢,有什么用呢?接下来一步步了解. 一.什么是Docker-S ...

  5. BT下载器Folx标签功能怎么实现自动的资源分类

    很多经典的电影作品,比如魔戒三部曲.蜘蛛侠系列.漫威动画系列等,在一个系列中都会包含多个作品.如果使用Folx bt种子下载器自带的电影标签的话,会将这些系列电影都归为"电影"标签 ...

  6. 使用Camtasia制作魔性抖肩舞视频

    最近一首风魔各大视频网站的魔性舞蹈又来袭了!这首充满魔性节奏的舞蹈就是抖肩舞了,为了将我热爱的抖肩舞视频分享给大家,我必须使用Camtasia教程录制(Windows系统)软件来制作一个魔性抖肩舞视频 ...

  7. 牛客练习赛71 数学考试 题解(dp)

    题目链接 题目大意 要你求出有多少个长度为n的排列满足m个限制条件 第i个限制条件 p[i]表示前 p[i]个数不能是1-p[i]的排列 题目思路 这个感觉是dp但是不知道怎么dp 首先就是要明白如果 ...

  8. C语言基础知识：几种特殊的函数宏封装方式

    函数宏介绍 函数宏,即包含多条语句的宏定义,其通常为某一被频繁调用的功能的语句封装,且不想通过函数方式封装来降低额外的弹栈压栈开销. 函数宏本质上为宏,可以直接进行定义,例如: #define INT ...

  9. 编程C语言进阶篇——自定义数据类型：结构体

    一.结构体 定义方法: 结构名 变量名 特点: 两个同类型的结构变量可以相互赋值,但是结构变量之间不能使用"<","=="等运算符,如果使用则需要对运算符 ...

  10. 路由器/交换机Console口登录密码丢失后如何恢复

    Console口登录密码丢失后如何恢复 如果忘记了Console口登录密码,用户可以通过以下两种方式来设置新的Console口登录密码. 通过STelnet/Telnet登录路由器/交换机设置新的Co ...