HTML5 关于一些本地操作 cookie，sessionStorage，localStorage
1，b/s 开发中经常会使用到 cookie，大部分情况下，都是由后端代码实现，那么 js 怎么实现对 cookie 的操作呢？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>cookie</title>
</head>
<style type="text/css">
input {
width: 200px;
height: 30px;
text-align: center;
line-height: 30px;
font-size: 14px;
border: none;
}
</style>
<body>
<input id="old-text" type="text" />
<input id="writer" type="button" value="写入或修改COOKIE" />
<input id="new-text" type="text" />
<input id="reader" type="button" value="读取COOKIE" />
<input id="delete" type="button" value="删除COOKIE" />
</body>
<script type="text/javascript">
// 封装操作 cookie 的方法，主要依赖于 document.cookie，比较简单
var cookie = function (name, value, options) {
if (typeof value != "undefined") {
options = options || {};
if (value === null) {
value = "";
options.expires = -1
}
var expires = "";
if (options.expires && (typeof options.expires == "number" || options.expires.toUTCString)) {
var date;
if (typeof options.expires == "number") {
date = new Date();
date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000))
} else {
date = options.expires
}
expires = "; expires=" + date.toUTCString()
}
var path = options.path ? "; path=" + (options.path) : "";
var domain = options.domain ? "; domain=" + (options.domain) : "";
var secure = options.secure ? "; secure" : "";
document.cookie = [name, "=", encodeURIComponent(value), expires, path, domain, secure].join("")
} else {
var cookieValue = null;
if (document.cookie && document.cookie != "") {
var cookies = document.cookie.split(";");
for (var i = 0; i < cookies.length; i++) {
var cookie = cookies[i].trim();
if (cookie.substring(0, name.length + 1) == (name + "=")) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break
}
}
}
return cookieValue;
}
}; // 写入或者修改
document.getElementById('writer').onclick = function(){
cookie('text', document.getElementById('old-text').value);
} // 读取
document.getElementById('reader').onclick = function(){
document.getElementById('new-text').value = cookie('text');
} // 删除
document.getElementById('delete').onclick = function(){
cookie('text', null);
} /* 其他配置参数
cookie("Key", "Value", {
expires: 7, // 有效期, 单位天, 默认 -1，页面关闭失效
path: "/", // cookie 存放的路径, 默认为当前页面路径, 跨页面读取可设置为根目录, 或者显示设置 path
domain: // Cookie的域名属性，默认是创建该cookie的页面域名,一般不设置
secure: true // cookie的传输是否要求一个安全协议，例如HTTPS, 默认为 fasle
});
*/
</script>
</html>
2，H5 新增加的两个 api：sessionStorage，localStorage 他们都遵循 key value 的形式，并且 key value 都只能为字符串
3，分别都有两个方法如 sessionStorage.setItem(key, value) 和 sessionStorage.getItem(key) 使用方法也是相当简单
4，不同的是 sessionStorage 的值在页面关闭后马上失效，localStorage 只要不清理便永远存在
5，localStorage 有储存上限，不同的浏览器各不相同，大约为 2M 左右
HTML5 关于一些本地操作 cookie，sessionStorage，localStorage的更多相关文章
- session,cookie,sessionStorage,localStorage的区别及应用场景
session,cookie,sessionStorage,localStorage的区别及应用场景 浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式,可以利用cookie,session等跟 ...
- 缓存session,cookie,sessionStorage,localStorage的区别
https://www.cnblogs.com/cencenyue/p/7604651.html(copy) 浅谈session,cookie,sessionStorage,localStorage的 ...
- 彻底弄清楚session,cookie,sessionStorage,localStorage的区别及应用场景（面试向）
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_94 客户端状态保持是一个老生常谈的问题了,归根结底追踪浏览器的用户身份及其相关数据无非就是以下四种方式:session,cooki ...
- jquery访问浏览器本地存储cookie，localStorage和sessionStorage
前言:cookie,localStorage和sessionStorage都是浏览器本地存储数据的地方,其用法不尽相同:总结一下基本的用法. 一.cookie 定义: 存储在本地,容量最大4k,在同源 ...
- cookie,sessionStorage,localStorage
本文转 sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可以方便的在web请求之间保存数据.有了本地数据,就可以避免数据在浏览器和服务 ...
- 本地存储 cookie,session,localstorage( 一)基本概念及原生API
http://www.w3school.com.cn/html5/html_5_webstorage.asp http://adamed.iteye.com/blog/1698740 localSto ...
- session,cookie,sessionStorage,localStorage的相关设置以及获取删除
一.cookie 什么是 Cookie? "cookie 是存储于访问者的计算机中的变量.每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie.你可以使用 JavaScrip ...
- 本地存储（cookie&sessionStorage&localStorage）
好文章,最全面.就查它吧:https://segmentfault.com/a/1190000004556040 1.DOM存储:https://developer.mozilla.org/zh-CN ...
- 浅谈session,cookie,sessionStorage,localStorage的区别及应用场景
浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式,可以利用cookie,session等跟服务端进行数据交互. 一.cookie和session cookie和session都是用来跟踪浏览器 ...
随机推荐
- vue重温之mint-ui------------点击事件绑定
第一次接触mint-ui,在使用它的tabbar时,为了达到点击切换页面的效果,采用了点击事件的方式,然后就碰到了这么个问题: 是的,点击事件是不起作用的. 然后刚好一个朋友也在做这块,而且有一段时间 ...
- Kali Linux系统的安装、配置、使用
这个随便写的,随便看看就好,主要给讲一下安装过程 这里因为我物理机装的本来就是kali.所以懒得重装了,直接拿虚拟机演示一下 物理机安装kali的话,推荐使用rufus使用dd模式刻盘,不会造成之后的 ...
- Android L2TP Client Setup
原文链接:http://www.softether.org/4-docs/2-howto/9.L2TPIPsec_Setup_Guide_for_SoftEther_VPN_Server/3.Andr ...
- 像使用数据库一样使用xml
目录 xml简介 语言结构 tinyxml 下载tinyxml 应用实例 tinyxml的封装 封装源码 实际应用 xml简介 XML 没什么特别的.它仅仅是纯文本而已.有能力处理纯文本的软件都可以处 ...
- SignalR 行实时通信最大连接数
SignalR 搭建实时刷新应用虽然非常方便,但是有个问题你必须考虑到,就是一般的浏览器,对于SignalR的全双工通信方式,绝大多数浏览器都只支持6个新窗口,如果你打开第7个,那么新的框口页面是不会 ...
- OpenJ_Bailian 4148 生理周期
生理周期 OpenJ_Bailian - 4148 Time limit1000 ms Memory limit65536 kB OS Linux SourceEast Central North A ...
- 多个ROS工作空间常见的问题
1. 在/home/user_name/.bashrc文件中写入多个工作空间的环境变量,这样会导致环境变量之间相互覆盖.最常见的问题就是找不到工作空间中某个launch文件.节点.rviz插件等. 解 ...
- Docker安装使用battery historian
apt-get insatll docker.io battery historian ubuntu下使用 首先要确保是google浏览器,然后用命令行 google-chrome --proxy-s ...
- oracle函数操作
感于总有些网友提出一些非常基础的问题,比如有没有实现某某功能的函数啊,某某函数是做什么用的啊,格式是什么等等,同时也感受到自己对oracle函数认识的不足,于是集中月余时间专注于oracle函数,小有 ...
- 教你如何下载并破解IAR
最近参加项目要写STM8的工程的,所以用到IAR,所以就自己安装了一次然后写个心得. 因为我用到的是STM8,所以我就下载了STM8的,不过其他过程都一样的. 首先去到IAR SYSTEMS的官网,找 ...