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都是用来跟踪浏览器 ...
随机推荐
- D类IP地址和组播传输
在224.0.0.0-239.255.255.255范围内的地址称为D类IP组播地址.其中,224.0.0.0-224.0.0.255为预留的组播地址(永久组地址),地址224.0.0.0保留不做分配 ...
- Linux第三节课学习笔记
常见执行Linux命令的格式:命令名称 [命令参数] [命令对象]. 命令参数分长格式与短格式,短格式之间可合并. echo命令用于在终端输出字符串或变量提取后的值,格式为“echo [字符串 | $ ...
- django-枚举类型扩展方法
原文地址:https://docs.djangoproject.com/en/dev/ref/models/instances/#django.db.models.Model.get_FOO_disp ...
- dll被设置为用记事本打开的解决方法
dll被设置为用记事本打开的解决方法: 打开注册表编辑器 HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Explorer\Fi ...
- 转：Excel—“撤销工作表保护密码”的破解并获取原始密码
在日常工作中,您是否遇到过这样的情况:您用Excel编制的报表.表格.程序等,在单元格中设置了公式.函数等,为了防止其他人修改您的设置或者防止您自己无意中修改,您可能会使用Excel的工作表保护功能, ...
- Firebird Embedded 部署的一个坑
今天把旧程序升级了,把DBX组件换成了FireDac组件,在虚拟机里测试的时候,一直报上图中的错误,但是在主机上运行无问题,之前用户使用也一直没报过这个错. 折腾了又折腾,还是搞不定,感觉脑袋有点大了 ...
- delphi Parallel 之 TTask 初试
unit Unit1; interface uses Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, System ...
- SoapUI接口测试-验签值处理-调用java的加密jar包
转载自:https://www.jianshu.com/p/7c672426a165 一. 背景: 调用接口时有个请求参数是对请求入参按一定规则进行加密生成的验签值,每次不同参数的请求生成唯一的验签值 ...
- EF Like
public static class EdmxExtensions { [EdmFunction("YourEFModel", "String_Like")] ...
- PHP中的traits快速入门
traits 在学习PHP的过程中,我们经常会翻阅PHP的官方手册.一般理解能力强悍的人多阅读几遍便可轻松理解其中要领,但往往更多的初学者对官方文档中寥寥数语的描述难以理解.作为一个曾有同样困扰的人, ...