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都是用来跟踪浏览器 ...
随机推荐
- 11. IDS （Intrusion detection systems 入侵检测系统 6个）
Snort该网络入侵检测和防御系统擅长于IP网络上的流量分析和数据包记录. 通过协议分析,内容研究和各种预处理器,Snort可以检测到数千个蠕虫,漏洞利用尝试,端口扫描和其他可疑行为. Snort使用 ...
- 离线安装expect
expect依赖tcl库 安装包: https://files.cnblogs.com/files/tozh/tcl8.4.11-src.tar.gz https://files.cnblogs.co ...
- 服务程序在c#中的写法
1.在VS.NET2003中新建一个WINDOWS服务程序的项目WinSrv_A. 2.更改SERVICE1.CS属性SERVICENAME为你所要建立的服务名称,在服务管理器->名称中你可以看 ...
- composer.json
{ "require": { "doctrine/doctrine-orm-module": "0.*", ...
- Flagr 配置说明
说明文档来自官方文档 https://checkr.github.io/flagr/#/flagr_env 完整配置 包含了组件的配置参数以及说明,对于学习如何使用Flagr 还是很重要的,包含了数据 ...
- Java扩展方法之SPI
API:API(Application Programming Interface)表示应用程序编程接口 SPI:SPI(Service Provider Interface)表示服务提供商接口 A ...
- .Net Core 没有 WebForm 是 历史 的 退步， MVC 是一个 糟糕 的 设计
WebForm 自面世以来, 广受广大开发人员的欢迎 . 当然, WebForm 有一些 著名的 弊病, 比如 笨重的 ViewState . 不过 我们 可以 用 一些 更加 先进 和 灵巧 的 ...
- js for循环中定义clike事件由于闭包导致的循环变量获取不到的问题
在网上找的 记下来以备不时之需 案例; 本人有一个数组按钮 循环数组按钮 给每个按钮添加click事件 原本以为搞定但是出现了 每个按钮都是数组最后的方法 然后查找问题 发现onclike事件中的i ...
- tomcat配置接口访问时间
这次刚好用到,亲测可用.参照:https://www.cnblogs.com/wuxun1997/p/9068398.html 项目中有些页面时延不稳定,需要看每次接口调用时延,怎么看,有两种方法:一 ...
- DOM知识点总结
今天简单整理了一下js三部曲之DOM部分的内容,二话不说先上笔记: 1.什么是DOM? Document Object Model,即文档对象模型,它是让JavaScript能够操作html和xml的 ...