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的更多相关文章

  1. session,cookie,sessionStorage,localStorage的区别及应用场景

    session,cookie,sessionStorage,localStorage的区别及应用场景 浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式,可以利用cookie,session等跟 ...

  2. 缓存session,cookie,sessionStorage,localStorage的区别

    https://www.cnblogs.com/cencenyue/p/7604651.html(copy) 浅谈session,cookie,sessionStorage,localStorage的 ...

  3. 彻底弄清楚session,cookie,sessionStorage,localStorage的区别及应用场景（面试向）

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_94 客户端状态保持是一个老生常谈的问题了,归根结底追踪浏览器的用户身份及其相关数据无非就是以下四种方式:session,cooki ...

  4. jquery访问浏览器本地存储cookie，localStorage和sessionStorage

    前言:cookie,localStorage和sessionStorage都是浏览器本地存储数据的地方,其用法不尽相同:总结一下基本的用法. 一.cookie 定义: 存储在本地,容量最大4k,在同源 ...

  5. cookie,sessionStorage,localStorage

    本文转 sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可以方便的在web请求之间保存数据.有了本地数据,就可以避免数据在浏览器和服务 ...

  6. 本地存储 cookie,session,localstorage( 一)基本概念及原生API

    http://www.w3school.com.cn/html5/html_5_webstorage.asp http://adamed.iteye.com/blog/1698740 localSto ...

  7. session,cookie,sessionStorage,localStorage的相关设置以及获取删除

    一.cookie 什么是 Cookie? "cookie 是存储于访问者的计算机中的变量.每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie.你可以使用 JavaScrip ...

  8. 本地存储（cookie&sessionStorage&localStorage）

    好文章,最全面.就查它吧:https://segmentfault.com/a/1190000004556040 1.DOM存储:https://developer.mozilla.org/zh-CN ...

  9. 浅谈session,cookie,sessionStorage,localStorage的区别及应用场景

    浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式,可以利用cookie,session等跟服务端进行数据交互. 一.cookie和session cookie和session都是用来跟踪浏览器 ...

随机推荐

  1. 【转载】【SQL练习】经典SQL练习题

    出处 https://blog.csdn.net/mrbcy/article/details/68965271 准备数据 建表语句 CREATE TABLE students (sno VARCHAR ...

  2. SQL server 多个字段设为主键

    create table teacher_course( ton char(8) not null, classno char(8) not null, con char(4) not null pr ...

  3. XML基础学习

    XML 信息传输工具 标签未被预定义 具有自我描述性 W3C的推荐标准 XML  HTML的差异 XML:传输 存储数据 HTML:显示数据 树结构 <root> <child> ...

  4. 左耳听风-ARTS-第3周（2019/4/7-2019/4/13）

    Algorithm 本周的算法题是按顺序合并两个已排序的链表(https://leetcode.com/problems/merge-two-sorted-lists/).和归并排序的合并已排序数组的 ...

  5. 2、Linux安装jmeter

    1.下载地址 http://jmeter.apache.org/download_jmeter.cgi 2.选择下载,本地选择,Source版会比较坑 3.安装jdk8,过程省略,可参考:https: ...

  6. 【MatConvNet代码解析】 vl_nnsoftmaxloss

    背景知识:http://deeplearning.stanford.edu/wiki/index.php/Softmax%E5%9B%9E%E5%BD%92 假设softmax层的输入(softmax ...

  7. Android学习笔记-事件处理

    第三章 Android的事件处理 Android提供两种事件处理方式,基于回调和基于监听器.前者常用于传统图形界面编程中,而后者在AWT/Swing开发中常用. 3.1 事件处理概述 对于基于回调的事 ...

  8. HD，3G视频数据中行号的插入方法---Verilog代码实现

    HD,3G视频数据中行号的插入方法---Verilog代码实现 行号的生成: `timescale 1ns / 1ps //////////////////////////////////////// ...

  9. Ubuntu 18.04 启用 rc.local 设置开机启动

    ubuntu18.04 不再使用initd管理系统,改用systemd. 然而systemd很难用,改变太大,跟之前的完全不同. 使用systemd设置开机启动为了像以前一样,在/etc/rc.loc ...

  10. python 多线程threading的学习一

    1. import threading #引入线程模块 2 申明实例 t = threading.Thread(target  = fun, args = (,)) 说明:参数target 是要运行的 ...