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. Java（日期、随机数、系统工具类）

    Date类 一般用于获取时间 Date date1 = new Date();//获取当前系统时间 Date date2 = new Date(10000);//获取从标准基准时间起10000毫秒的时 ...

  2. etectMultiScale(gray, 1.2,3,CV_HAAR_SCALE_IMAGE,Size(30, 30))

    # 函数原型detectMultiScale(gray, 1.2,3,CV_HAAR_SCALE_IMAGE,Size(30, 30)) # gray需要识别的图片 # 1.03:表示每次图像尺寸减小 ...

  3. c# 中 利用 CookieContainer 对 Cookie 进行序列化和反序列化校验

    private void Form1_Load(object sender, EventArgs e) { var cookieStr = @".CNBlogsCookie=1BE76122 ...

  4. supervisor支持python虚拟环境venv

    在项目中使用supervisor时,如何在虚拟环境下启动一直存在些小问题. 比如我要写 Cesi程序的监听,我是手动安装的执行之前 要先加载环境source venv/bin/activate 所以写 ...

  5. Java泛型相关总结（上）

    最近在看<Java核心技术>泛型相关的部分,总结下. 泛型程序设计是什么? 泛型编程(generic programming)是计算机编程中的一种风格,类型通过参数指定.意味着编写的代码可 ...

  6. Python 3 教程

    http://www.runoob.com/python3/python3-tutorial.html https://www.jianshu.com/p/f1332c58ca86

  7. 创建postgresql表空间

    mkdir -p /data/pg_data/tsp sudo chown -R postgres:postgres /data/pg_data/tsp 用下面的命令断开其它的链接 登陆服务器psql ...

  8. java 通信

    UDP package com.le; import org.junit.Test; import java.io.IOException; import java.net.DatagramPacke ...

  9. CSS 不规则图形绘制

    基础技能1 - 神奇的border 我们先来画一个长方形: .Rectangle { height: 100px; width: 200px; background: darkgray; border ...

  10. java 通过jmx获取active mq队列消息

    一.修改active mq配置文件 修改\conf\activemq.xml,带下划线部分 <!-- Licensed to the Apache Software Foundation (AS ...