JavaScript：浏览器的本地存储
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：浏览器的本地存储的更多相关文章
- 使用userData兼容IE6-10，chrome，FF 及360等浏览器的本地存储
开发过程中涉及本地存储的使用,IE很多版本都不支持localStorage,没办法,就得兼容使用userData了.废话不说了,看代码: (function(window){var LS;(funct ...
- JavaScript / 本地存储
cookie 首先让我们先了解一下,什么是cookie,cookie是浏览器提供的一种机制,他将document.cookie的接口提供给JavaScript使其可以对cookie进行控制,但cook ...
- store.js - 轻松实现本地存储（LocalStorage）
store.js 是一个兼容所有浏览器的 LocalStorage 包装器,不需要借助 Cookie 或者 Flash.store.js 会根据浏览器自动选择使用 localStorage.globa ...
- Localstorage本地存储兼容函数
前言HTML5提供了本地存储的API:localstorage对象和sessionStorage对象,实现将数据存储到用户的电脑上.Web存储易于使用.支持大容量(但非无限量)数据同时存储,同时兼容当 ...
- (转)HTML5 本地存储
原文:http://www.cnblogs.com/rainman/archive/2011/06/22/2086069.html HTML5 本地存储 1.sessionStorage 2.loca ...
- 本地存储 cookie,session,localstorage( 一)基本概念及原生API
http://www.w3school.com.cn/html5/html_5_webstorage.asp http://adamed.iteye.com/blog/1698740 localSto ...
- web前端实现本地存储
当我们在提及web前端本地存储的时候,首先需要介绍一下本地化存储的概念和历史.本地化存储从来不是一个新奇的概念,因为web应用程序一直在追求的就是媲美甚至超越桌面应用程序.但是桌面应用程序一直优于we ...
- 本地存储localStorage以及它的封装接口store.js的使用
本地存储localStorage以及它的封装接口store.js的使用 sublime-text chrome javascript readyGo 2016年11月20日发布 0 推荐 9 收藏 ...
- HTML5 本地存储形式
1.sessionStorage 2.localStorage 3.Database Storage 4.globalStorage 5.兼容性 参考文献 本地持久化存储一直是本地客户端程序优于 we ...
随机推荐
- Ceph中的Copyset概念和使用方法
前言 copyset运用好能带来什么好处 降低故障情况下的数据丢失概率(增加可用性) 降低资源占用,从而降低负载 copyset的概念 首先我们要理解copyset的概念,用通俗的话说就是,包含一个数 ...
- JVM初识
先来看一张图 首先jvm是什么? jvm是java运行环境的一部分,是一种以软件模式虚拟出来的一个计算机系统. 如上图所示,JVM 主要分为三个子系统:类加载器.运行时数据区和执行引擎. 类加载器子系 ...
- Spring第四天，BeanPostProcessor源码分析，彻底搞懂IOC注入及注解优先级问题！
- 精尽 MyBatis 源码分析 - 整体架构
该系列文档是本人在学习 Mybatis 的源码过程中总结下来的,可能对读者不太友好,请结合我的源码注释(Mybatis源码分析 GitHub 地址.Mybatis-Spring 源码分析 GitHub ...
- 创建Spring Cloud聚合项目
使用maven创建单一项目的时候通常用不到聚合项目,创建spring cloud项目时候,由于下面都是一个一个微服务,每个服务对应一个项目,这就需要用到聚合项目,方便对依赖和项目之间的关系进行管理,使 ...
- HotSpot类模型之ArrayKlass
上一篇分析了 HotSpot类模型之InstanceKlass ,这次主要分析表示java数组类型的C++类. 1.ArrayKlass类 ArrayKlass继承自Klass,是所有数组类的抽象基类 ...
- 面试半年！三面阿里，四面蚂蚁金服，居然倒在了一个Java集合之Map上？
Map接口 Map与Collection并列存在.用于保存具有映射关系的数据:key-valueMap中的key和value都可以是任何引用类型的数据Map中的key用set来存放,不允许重复,即同一 ...
- Guitar Pro吉他指弹入门——美式指弹
说起指弹吉他,很多身边的琴友首先反应到的是押尾桑,岸部真明,伍伍慧等等指弹艺术家的日式指弹.笔者在初涉指弹的时候,也是如此,但是随着学习的加深,首先认识到了汤米大神(Tommy Emmanuel),然 ...
- pytest失败重跑
一.说明 平常在做功能测试的时候,经常会遇到某个模块不稳定,偶然会出现一些bug,对于这种问题我们会针对此用例反复执行多次,最终复现出问题来.自动化运行用例时候,也会出现偶然的bug,可以针对单个用例 ...
- framework中的sentinel
引入切面: 切面+sentinel-web-servlet private void initDataSource() { String zkUrl = zaSentinelConfig.getDat ...