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 ...
随机推荐
- 记录一个处理Excel的新插件：Alibaba Easy Excel
EasyExcel是一个基于Java的简单.省内存的读写Excel的开源项目.在尽可能节约内存的情况下支持读写百M的Excel.github地址:https://github.com/alibaba/ ...
- Qt For MacOs环境搭建
使用VMWARE关于macos镜像搭建,参考https://blog.csdn.net/u011415782/article/details/78505422 关于darwin8.5.5 来安装vmt ...
- time和random模块
# 时间模块 # 三种时间表现形式 # 时间戳 # 格式化的时间字符串 # 元组(struct_time)结构化时间 struct_time元组共有9个元素(年,月,日,时,分,秒,一年中的第几周,一 ...
- Redis实现分布式缓存
Redis 分布式缓存实现(一) 1. 什么是缓存(Cache) 定义:就是计算机内存中的一段数据: 2. 内存中数据特点 a. 读写快 b. 断电立即丢失 3. 缓存解决了什么问题? a. 提 ...
- python-网络安全编程第一天（requests模块）
前言 感觉现在做好多CTF题都需要python去写工具,正好期末考试放假利用空余时间来学学. requests简介 Requests是用python语言基于urllib编写的,采用的是Apache2 ...
- 在 Spark 数据导入中的一些实践细节
本文由合合信息大数据团队柳佳浩撰写 1.前言 图谱业务随着时间的推移愈发的复杂化,逐渐体现出了性能上的瓶颈:单机不足以支持更大的图谱.然而,从性能上来看,Neo4j 的原生图存储有着不可替代的性能优势 ...
- 硕思logo设计师注册码去哪里找，文末附链接
硕思logo设计师注册码去哪里找呢?当然是硕思logo设计师官网啦! 最近小编总是会被网友们咨询关于logo设计的问题,其中很多网友并不是专业的设计人员,特别是一些设计公司面对新手设计时,往往会不知所 ...
- CorelDRAW复制及镜面反转对象
复制的设计都是由简单的图案和基础的操作堆砌而成的,如何恰当地使用这些基础操作,就是各位新学者要格外注意的地方. 这次我们介绍CorelDRAW中的复制和镜面操作. 一.复制 1.复制单个对象 使用Co ...
- Java之 函数（五）
第一部分 : IDEA开发工具 1.数组 1.1 数组介绍 数组就是存储数据长度固定的容器,存储多个数据的数据类型要一致. 1.2 数组的定义格式 1.2.1 第一种格式 数据类型[] 数组名 ...
- 【操作系统】先来先服务和短作业优先算法（C语言实现）
[操作系统] 先来先服务算法和短作业优先算法实现 介绍: 1.先来先服务 (FCFS: first come first service) 如果早就绪的进程排在就绪队列的前面,迟就绪的进程排在就绪队列 ...