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 ...
随机推荐
- 设计模式(一)--工厂模式(Go实现)
package Factory import "fmt" type Restaurant interface { GetFood() } type Donglaishun stru ...
- IAR设置字体
1.IAR设置字体 第一种方法可以在IDE环境下,选择Tools -> option -> Editor - > Colors and Fonts,然后右边的Editor Font就 ...
- EOF和scanf函数
EOF和scanf函数 scanf函数的返回值 scanf函数返回成功读入的数据项数,读入数据时遇到了"文件结束(end of file)"或者错误则返回EOF,EOF定义为int ...
- Spring Cloud注册中心之Consul
Consul简介 Consul是HashiCorp公司使用Golang语言开发的一中多服务解决方案工具,相比于其他服务注册中心来说,Consul的功能更为强大,丰富,其中最基本的功能包含下面几点(翻译 ...
- spring boot配置MySQL8.0 Druid数据源
创建spring boot项目,在pom中添加相应依赖 <!--web--> <dependency> <groupId>org.springframework.b ...
- kali 安装redis
wget http://download.redis.io/releases/redis-2.8.3.tar.gz 下载 tar xzf redis-2.8.3.tar.gz ...
- web安全入门--入门条件
介绍:网络安全由习大大提出,是继海.陆.空.外太空的第五大作战领域,也是一个关系国家安全和主权.社会稳定.民族文化继承和发扬的重要问题.其重要性,正随着全球信息化步伐的加快越来越重要.接下来,我向大家 ...
- 如何在Guitar Pro上添加吉他和弦
Guitar Pro是一款很适合广大吉他爱好者的优秀吉他谱学习与制谱软件,吉他爱好者可以使用它来更好的辅助自己学习吉他.在我们根据弹唱时,都会跟着谱子上标记的和弦来弹奏,不同的和弦有着不同的风格,或暗 ...
- img元素的联用
img元素的常用属性: src属性:资源地址 alt属性:当图片资源失效时,将出现该属性的设置的文字 最简单的联动: 和a元素联用(直接用a标签套) <a href="https:// ...
- leetcode165. 比较版本号
比较两个版本号 version1 和 version2.如果 version1 > version2 返回 1,如果 version1 < version2 返回 -1, 除此之外返回 0 ...