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都是用来跟踪浏览器 ...
随机推荐
- 慢慢啃css
上个礼拜清明放假了,所有忘记更新了,但是每天的学习没有落下,嘿嘿嘿~ 可是这两天就很头疼了,因为发烧了,呜呜呜~昨天在床上睡了一天,四肢无力,头晕眼花,严重的发烧,想靠自己的免疫力扛过去,缺没有. 今 ...
- 软件开发者路线图梗概&书摘chapter2
空杯心态:放下对技能水平的自鸣得意 1.入门语言:学习一门语言,从实际问题入手→形成反馈回路 构建学习沙箱 利用实际代码,进行学习测试 学习一门语言:与精通该语言的专家一起工作,即找人指导 阅读他人的 ...
- java标识符、修饰符和关键字
一.标识符 1.概念:标识符好比人和物的姓名,java中标识符就是类.对象.方法.变量.接口和自定义数据类型等等的名字. 2.规则: (1)首位不能是数字. (2)标识符对大小写敏感. (3)不可以是 ...
- EBS查询在线用户
转自:https://www.cnblogs.com/benio/archive/2011/03/10/1979417.html SELECT u.user_name, app.application ...
- c# 纯代码调用 webservice
public static class RequestHelper { public class RequestResult { public RequestResult(bool requestRe ...
- os常用模块，json，pickle，shelve模块，正则表达式（实现运算符分离），logging模块，配置模块，路径叠加，哈希算法
一.os常用模块 显示当前工作目录 print(os.getcwd()) 返回上一层目录 os.chdir("..") 创建文件包 os.makedirs('python2/bin ...
- 窗口关闭时弹出内存不能为read
出现这个错误的原因是:某个指针类型的变量或对象,其记录的内容不可用,但进程对其进行了访问.可能由于:指针类型的变量或对象未被赋值就被使用:或者已经被正常释放后,又被访问所致.由于是在结束进程时报这样的 ...
- 前端——JavaScript之if语句
4.1 if语句 如果……否则…… , 让程序出现分支 1 <script type="text/javascript"> 2 va ...
- 前端-JavaScript1-7——JavaScript之数学运算符
---恢复内容开始--- 运算符叫做operator,也可以叫做操作符.运算符有很多种,一元运算符.二元运算符:数学运算符.逻辑运算符……我们今天先学习数学运算符,比较简单 + 加法 - ...
- 配置RIPng（PT）
一:拓扑图 二:配置过程 1:首先为pc0:pc1: pc2 配置IPv6地址(注意标明前缀),可以手动配置也可以自动获取. 手动配置 自动获取 2:给路由器配置RIPng协议 全局开启RIPng协议 ...