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 ...
随机推荐
- Redis分布式锁的正确使用与实现原理
模拟一个电商里面下单减库存的场景. 1.首先在redis里加入商品库存数量. 2.新建一个Spring Boot项目,在pom里面引入相关的依赖. <dependency> <gro ...
- Nacos配置中心源码分析
1.使用 compile 'com.alibaba.cloud:spring-cloud-starter-alibaba-nacos-config:2.2.3.RELEASE' spring: app ...
- Git本地仓库和远程仓库冲突解决
场景描述: 在本地创建了一个git repo,并且执行了,git init命令,创建了.gitignore文件,或者README.md文件: 在远程创建了一个git repo,创建时也初始化了.git ...
- javascript布局转换
javascript布局转换是将原有的浮动布局通过JS里面的javascript属性 offsetLeft 和offsetTop默认值来给元素设置绝对定位. 原来的:缺点--我们想给网页中的图片添加拖 ...
- word选择+快捷键
统一修改红色章节标题字体:将鼠标放置在章节标题中,前提是各章节标题采用的格式是一样的,单击"选择"-"选择格式相似的文本"即可全部选中进行设置 如下图,章节标题 ...
- canal部署
转载: https://blog.csdn.net/qq_30043755/article/details/83539116 最后的binlog最后被封装为这样的一个对象: com.alibaba.o ...
- .nnmodel to .mlmodel
做项目时遇到.nnmodel 模型,不知道这是什么框架模型,没有头绪,抓住文件magic number是lzfse compressed, compressed tables. 在https://gi ...
- B. Irreducible Anagrams【CF 1290B】
思路: 设tx为t类别字符的个数. ①对于长度小于2的t明显是"YES"②对于字符类别只有1个的t明显是"YES"③对于字符类别有2个的t,如左上图:如果str ...
- 异步任务-----django-celery
异步任务 ---- django-celery 大家的知道celery的使用,网上也有很多的教程.因为最近在使用django来完成项目,无意间发现发现有个东西叫django-celery,比cel ...
- 洛谷 P3410 拍照(最大流 + 建图)
这道题问的是一群人要和另一群人合影,每个客人都有必须在场的人全部在场才能在场,每个客人给的有收入,但是邀请也需要支出,问最大收入? 我觉得可以总结为一类问题,就是有先决条件的网络流问题.看到费用和支出 ...