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 ...
随机推荐
- python文件操作与编解码
1 # 文件操作 2 3 ''' 4 1.文件路径:要知道文件的路径 5 6 2.编码方式:要知道文件是什么编码的.utf-8 gbk...... 7 8 3.操作方式:要以什么样的方式进行打开这个文 ...
- 源码分析：Semaphore之信号量
简介 Semaphore 又名计数信号量,从概念上来讲,信号量初始并维护一定数量的许可证,使用之前先要先获得一个许可,用完之后再释放一个许可.信号量通常用于限制线程的数量来控制访问某些资源,从而达到单 ...
- 本地Git仓库的使用方法
一.如何将自己的项目上传到本地git仓库以及上传到GitHub上面 上传到本地git仓库步骤: 1.先配置好git:工具-->扩展和更新-->安装GitHbu Extension for ...
- C#设计模式——代理模式（Proxy Pattern）
引言 在我们的生活中,经常会遇到需要什么东西,但是自己又不是很方便或者对方不是很方便,则就需要中间的一个代理人去解决.例如代购.在软件开发中,也会遇到这样的问题.有些对象有时候会由于网络或其他的障碍, ...
- 重闯Sqli-labs关卡第三天(6-10关)
第六关(双注入GET双引号字符型注) 核心代码: 1 $id = '"'.$id.'"'; 2 $sql="SELECT * FROM users WHERE id=$i ...
- centos6 安装和配置PHP 7.0
2015年12月初PHP7正式版发布,迎来自2004年以来最大的版本更新.PHP7最显著的变化就是性能的极大提升,已接近Facebook开发的PHP执行引擎HHVM.在WordPress基准性能测试中 ...
- 使用Camtasia制作魔性抖肩舞视频
最近一首风魔各大视频网站的魔性舞蹈又来袭了!这首充满魔性节奏的舞蹈就是抖肩舞了,为了将我热爱的抖肩舞视频分享给大家,我必须使用Camtasia教程录制(Windows系统)软件来制作一个魔性抖肩舞视频 ...
- IDM中的选项设置你了解多少？
IDM(Internet Download Manager)下载器能够兼容支持多种浏览器进行文件下载,很多时候只要复制一个地址IDM的下载弹窗就自动弹出来,有时候不需要下载的时候也会弹,时间久了就会感 ...
- 「CSP-S 2019」括号树
[题目描述] 传送门 [题解] 是时候讨论一下我在考场上是怎么将这道题写挂的了 初看这道题毫无思路,先看看部分分吧 一条链的情况?设k[i]表示前i个括号的方案数 显然\(k[i]=k[i-1]+\) ...
- jQuery 第二章 实例方法 DOM操作取赋值相关方法
取赋值相关方法: .html() .text() .val() .size() .addClass() .removeClass() .hasClass() .html() html方法干嘛的呢,底 ...