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讲义 第八章课后题

    1.创建一个Set集合,并用Set集合保存用户通过控制台输入的字符串. import java.util.HashSet; import java.util.Scanner; public class ...

  2. vue-cil 服务端预渲染 prerender-spa-plugin

    众所周知单页面应用不利于SEO,为了解决这个问题网上所给出的2个解决方案1.SSH服务器端渲染2.预渲染由于页面较少,且预渲染相对于SSH比较简单,于是选择预渲染页面,预渲染可以极大的提高网页访问速度 ...

  3. MySQL Error--Got error 28 from storage engine

    问题描述执行查询或SHOW命令,返回错误信息:Got error 28 from storage engine 问题原因临时文件所在磁盘空间已满 解决办法1.使用df -lh查看磁盘空间使用情况;2. ...

  4. docker安装centos后没有ifconfig命令解决办法

    使用docker pull centos命令下载下来的centos镜像是centos7的最小安装包,里面并没有携带ifconfig命令,导致我想查看容器内的ip时不知道该怎么办 yum provide ...

  5. 命令生成所有数据库表模型以及 CRUD

    将下列代码写到文件复制到项目 console\controller 目录下: <?php namespace console\controllers; use Yii; use yii\cons ...

  6. 结对编程core_6

    林静雯PB16060913 李鑫PB16061107 对于这种结对的工作,由于有过电子设计实践的基础,大概知道建一个工程需要做的事,有点经验还是有帮助的. 一.问题要求: 1·主要功能是随机产生有效的 ...

  7. 时光如梭,MES生产制造执行系统上线2周年--->2016.08，发个博客展示一下系统的主要功能!

    以下程序是系统当中的主要功能信息,一些相对简单功能就不在此处展示了. 1.模具基础资料Excel导入与模具资料手动更新功能.友情提示:为了避免不必要的麻烦已经将部分信息打码.! 2.配方资料Excel ...

  8. ios中[UIScreen mainscreen].bounds 的大小是由什么决定的?

    ios中经常会用[UIScreen mainScreen].bounds 来获取屏幕的frame,但最近网上下载了个项目,在模拟器运行起来,打印[UIScreen mainScreen].bounds ...

  9. Docker CMD in detail

    CMD CMD 指令就是用于指定默认的容器主进程的启动命令的,我们直接 docker run -it ubuntu 的话,会直接进入 bash.我们也可以在运行时指定运行别的命令,如 docker r ...

  10. CentOS 7修改系统时间及硬件时间

    转载于:https://www.cnblogs.com/LouisZJ/p/8554991.html [root@nginx ~]# timedatectl --help timedatectl [O ...