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都是用来跟踪浏览器 ...
随机推荐
- 记SCOI2019
离精英体验营结束已两周的,要哭的要笑的现在也一定释怀了.是时候冷静分析一下这次的考试了.时间序虽然有流水账的嫌疑,但这毕竟是OI界的流行风气. day0 早上坐学校包的商务车去了电子科技大学.走在来过 ...
- C++——智能指针unique_ptr的实现
起初,我最直观的设计想法,直接设计一个类:包含全部要素(对象,指针计数).然后提供出去. class CPoint { public: CPoint(, ) : x(xVal), y(yVal) {} ...
- windows知识点2
最近在使用win10系统的过程中,无法获取dns报错,上不了网.经过一番折腾,最终在用下面的方法,解决了问题.第二步很关键.完成步一下步骤重启电脑应该就可以上网了.12第一步:使用 ipconfig ...
- servlet_4
过滤器入门 过滤器的概念及执行基本流程 过滤器的使用场景 过滤器的实现及基本配置 过滤器链 过滤器链的配置 使用注解的方式无法保证过滤器链的执行顺序,所以只能使用web.xml的配置 按照出现在web ...
- ubuntu下Qt链接MySQL： QMYSQL driver not loaded(不用重新编译源码)
先切换到qt数据库驱动目录即:qt安装目录下的gcc_64/plugins/sqldrivers,然后 ldd libqsqlmysql.so 若libmysqlclient.so.18 not fo ...
- 更改系统盘符后DFS无法复制故障处理
DFS是微软的分布式文件系统,其中有命名空间和复制功能,我们有文件服务器,平时主要使用的是复制功能,保持文件服务器的数据实时同步,这一台我觉得还挺好用的,可以不借助备份软件就可以实现2台文件服务器的数 ...
- Eclipse从GitHub下载代码
转载自:http://blog.csdn.net/u014785687/article/details/73473769 打开git视图(window->show view),搜索git,选择G ...
- Unity 3D中的阴影设置
在Unity 3D中,经常需要用到光照阴影,即Directional Light的Shadow,Shadow分为Hard Shadow和Soft Shadow.区别是Soft Shadow的阴影边缘比 ...
- FPGA调试技巧
FPGA调试技巧 八月,一直在debug, 编译,查信号,几乎没机会,也没心思停留下来看点东西,静心思考,做点笔记.今天,在硬盘上翻到了保存已久,但一直没想起来读的一本手册.这是我初入职场,决定从硬件 ...
- http摘要认证
摘要认证步骤: 1. 客户端访问一个受http摘要认证保护的资源. 2. 服务器返回401状态以及nonce等信息,要求客户端进行认证. HTTP/1.1 401 Unauthor ...